iframe的使用动态添加

本文介绍: window.postMe ssa ge() 方法可以安全地实现跨源通信。但是一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用window.postMessa ge结合 window.addEventLi stene这种消息传递技术来实现安全的通信。标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持 iframe 标签。在iframe的子页面中需要发出事件，让父页面销毁。在引入 iframe的index.html 页面。

一：iframe的基本 使用

    &lt;iframe src="http://www.taobao.com" width="600px" height="300px" frameborder="0"&gt;</iframe&gt;

二：iframe的父子通讯

window.postMessa ge() 方法可以安全地实现跨源通信。但是一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用window.p ostMessage结合 win dow.ad dEventLi stene这种消息传递技术来实现安全的通信。

在引入 i frame的index.html页面

<iframe id="iframe" src="./iframeDemo"></iframe>
 
<script>
//获取dom
var iframe = document.getElementById('iframe');
//在iframe加载完成后
iframe.onload = function() {
   // 向iframeDemo发送数据
   iframe.contentWindow.postMessage('index.html发出的消息', '*');
};
// 监听信息
window.addEventListener('message',(e) => {
    console.log(e);
}, false);
</script>

ifr a meDemo.html页面

<script>
// 监听信息，接收index.html的数据
window.addEventListener('message',(e) => {
    console.log(e.data);
    window.parent.postMessage('iframeDemo.html发出的消息', '*');
}, false);
</script>

三：动态 加载ifr a me

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div><button onclick="headerClick(Isrc)">打开淘宝</button></div>
    <div id="content" style="width: 1000px; height: 600px"></div>
    <script>
      //动态src
      const Isrc = "http://www.taobao.com";
      //创建iframe
      function createIframe(src) {
        const iframe = document.createElement("iframe");
        //传入iframe的src
        iframe.src = src;
        iframe.id = "ifr";
        iframe.width = "100%";
        iframe.height = "100%";
        document.getElementById("content").appendChild(iframe);
        console.log("创建iframe完成");
      }
      //点击事件
      function headerClick(id) {
        createIframe(id);
      }
      //删除iframe
      function closeIframe(){
        let iframe = document.getElementById("ifr");
        iframe.src = "about:blank";
        iframe.contentWindow.document.write('')
        iframe.contentWindow.document.clear();
        iframe.contentWindow.close();
        iframe.parentNode.removeChild(iframe);
        iframe = null;
      }
      //点击按钮事件
      function headerClick(src){
        createIframe(src)
      }
      //监听iframe页面发出的信息，销毁iframe
      window.addEventListener("message",(e) => {
          closeIframe();
        },
        false
      );
    </script>
  </body>
</html>

在iframe的子页面中需要发出事件，让父页面销毁

window.parent.postMessage('销毁iframe','*');

注意：iframe嵌入页面为Cesium时可能出现的报错

错误：VM5729:1 Blocked script execution in ‘ab out:blank‘ because the document’s frame is sandboxed and the ‘allow–scripts‘ permission is not set.

原因是：在“ab out:blank”中阻止脚本执行，因为文档的框架已被沙盒化并且未设置“allow-scripts”权限。这个错误提示是Cesium不识别 js，沙箱iframe不允许使用 js。

解决方案：

第一种：禁用info box。

const viewer = new Viewer('cesiumContainer', {
  infoBox: false, // If set to false, the InfoBox widget will not be created.
});

第二种：设置沙箱的权限

var iframe = document.getElementsByClassName(‘cesium-infoBox-iframe’)[0];
iframe.setAttribute(‘sandbox’, ‘allow-same-origin allow-scripts allow-popups allow-forms’);
iframe.setAttribute(‘src’, ‘’); //必须设置src为空 否则不会生效。