一：iframe的基本使用
<iframe> 标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。
<iframe> 标签常用属性介绍:<iframe> - HTML（超文本标记语言） | MDN
<iframe src="http://www.taobao.com" width="600px" height="300px" frameborder="0"></iframe>
二：iframe的父子通讯
window.postMessage() 方法可以安全地实现跨源通信。但是一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用window.postMessage结合window.addEventListene这种消息传递技术来实现安全的通信。
在引入iframe的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>iframeDemo.html页面
<script>
// 监听信息，接收index.html的数据
window.addEventListener('message',(e) => {
console.log(e.data);
window.parent.postMessage('iframeDemo.html发出的消息', '*');
}, false);
</script>三：动态加载iframe
<!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 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
原因是：在“about:blank”中阻止脚本执行，因为文档的框架已被沙盒化并且未设置“allow-scripts”权限。这个错误提示是Cesium不识别js，沙箱iframe不允许使用js。
解决方案：
第一种：禁用infobox。
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为空 否则不会生效。参考：https://blog.csdn.net/ganggun/article/details/124825612
