【html】用iframe在服务器环境下跨域单张图片或者视频

最新推荐文章于 2023-10-30 15:23:21 发布

KatyLight

最新推荐文章于 2023-10-30 15:23:21 发布

阅读量629

点赞数

分类专栏：样式静态页demo JS 文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_33014695/article/details/126117422

版权

样式同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

22 篇文章 0 订阅

订阅专栏

静态页demo

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    video{
      background: #7c97e2;
    }
    #box{
      height: 300px;
      width: 600px;
      border: 1px solid red;
    }
  </style>
  <script>
    function getWxImg(url) {
      let r = Math.random();
      let frameid = "f" + r;
      let imgId = "I" + r;
      frameid = frameid.split(".")[1];
      frameid = "frame" + frameid;
      imgId = imgId.split(".")[1];
      imgId = "frame" + imgId;
      window[frameid] =
        `<video id="${imgId}"  controls="controls" style="height: 100%;display: block;width: 100%;object-fit: contain" src="${url}?${ Math.random()}"
        ></video><style>body{margin:0;}</style>`
      let o = document.createElement("iframe");

       o.setAttribute("id", frameid);
      o.setAttribute("src", `javascript:parent.${frameid};`);
      o.setAttribute("frameBorder", "0");
      o.setAttribute("scrolling", "no");
      o.setAttribute("width", "100%");
      o.setAttribute("height", "100%");

      return o;
    }
    window.onload=()=> {
      let o = getWxImg("你的跨域视频")
      document.getElementById('box').append(o)
    }


  </script>
</head>
<body>
<div id="box">

</div>
<iframe></iframe>
</body>
</html>

这个会随机生成一个不太可能重名的id，然后通过操作iframe就可以直接显示跨域视频了，目前原理也不清楚，反正整合到vue或者任何框架都非常简便。