iframe用src打开另一个html时，跨域报错问题避坑

最新推荐文章于 2024-08-02 11:11:01 发布

在奔跑中寻找

最新推荐文章于 2024-08-02 11:11:01 发布

阅读量3.2k

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_43405848/article/details/118611748

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

需求描述： 项目中后端返回了一个html页面地址url，前端需要把这个html页面内容转成图片展示在页面中。

思路一： 最直接的就是在页面中用iframe打开这个url，打开后利用iframe的api'contentWindow.document.body获取需要的DOM，然后用html2canvas插件转成图片显示，同时iframe的样式属性diaplay设为none隐藏。

Bug问题描述： 想法好，现实很骨感，由于后端返回的url地址是跨域的，那肯定over了。但是当与后端协商后，经处理，后端返回了同源地址，还是出现iframe跨域报错，无法解决！！！

跨域时，共有三种行为受到限制：

Cookie、LocalStorage和IndexDB无法读取。
DOM无法获取。
AJAX请求不能发送。

解决思路： 既然用iframe的src无法打开，且神奇地发现只放了iframe，打印其DOM时，其document内部结构存在; 想到是否可以试试把后端返回的链接中的，html插入到iframe中的body下。
一试果然可以，反正我们用ifame的主要目的其实是开另一个小窗口，且在html2canvas截图时起到窗口作用(截图不至于跑偏出现白边)
在这里插入图片描述

获取iframe DOM下的body节点

const iframe = this.$refs["iframe" + index];
const ibody = iframe[0].contentWindow.document.body;

axios请求url地址拿到html代码，(axios解决跨域问题自行搜查)
使用innerHTML把获取的html插入body节点
使用html2canvas进行截图存图，隐藏iframe
示例代码Vue项目：
html部分：

<div
  v-for="(item, index) in informationData"
  :key="index"
  v-loading="item.loading"
  class="iframeBox"
   >
    <iframe
     :ref="'iframe' + index"
     class="iframe"
     frameborder="0"
     ></iframe>
</div>
//informationData是后端另一个接口返回的含需要请求的html页面地址的数据
//结构类似：[{name:"xxxx", link:"http://xxxxx"}]

js部分：

openImg(item, index) {
      const _this = this;
      item.loading = true;
      const iframe = this.$refs["iframe" + index];
      const ibody = iframe[0].contentWindow.document.body;
      axios.get(item.link).then(res => {
        ibody.innerHTML = res.data;
        _this.$nextTick(() => {
          html2canvas(ibody, {
            allowTaint: true,
            useCORS: true,
            scale: 2,
            logging: false
          }).then(canvas => {
            const imgBase64 = canvas.toDataURL("image/png");
            if (imgBase64) {
              item.loading = false;
              iframe[0].parentElement.style.display = "none";
              _this.imgArray.push({
                name: item.name,
                url: imgBase64
              });
            } else {
              console.log("image transfer failed");
            }
          });
        });
      });
    }