一. 页面如何嵌入iframe

非常简单，直接用就行了

<div style="">
    <iframe src="要引用的项目地址" style=""></iframe>
</div>
复制代码

这里要注意的是iframe会自带2px的border，可以用style自定义样式

二. 如何通信

首先这里最先遇到的麻烦是跨域问题，在window对象下有个postMessage方法，是专门用来解决跨域通信问题的。

看第一个使用场景，当前有一个iframePage.html（子）和index.html（父）页面

<!-- index.html -->
<body style="border:5px solid #333;">

  <h1>this is index</h1>

  <iframe src="./iframePage.html" id='myframe'></iframe>

</body>
复制代码

<!-- iframePage -->

<body style="border:5px solid #333;">

  <h1>this is iframePage</h1>

</body>
复制代码

父页面向子页面发送数据

// idnex.html

//获取iframe元素
iFrame = document.getElementById('myframe')

//iframe加载完毕后再发送消息，否则子页面接收不到 message
iFrame.onload = function(){

  //iframe加载完立即发送一条消息
  iFrame.contentWindow.postMessage('MessageFromIndex1','*');

}
复制代码

我们知道postMessage是挂载在window对象上的，所以等iframe加载完毕后，用iFrame.contentWindow获取到iframe的window对象，然后调用postMessage方法，相当于给子页面发送了一条消息。
postMessage方法第一个参数是要发送的数据，可以是任何原始类型的数据。
postMessage第二个参数可以设置要发送到哪个url，如果当前子页面的url和设置的不一致，则会发送失败，我们设置为*，代表所有url都允许发送。

子页面接收数据

// iframePage.html
window.addEventListener('message', (e) => {
    console.log("收到的数据: ", e)
})
复制代码

这样就完成父页面向子页面通信了
2. 子页面 => 父页面

// iframePage.html
window.parent.postMessage({msg: 'MessageFromIframePage'}, '*')
复制代码

// index.html
window.addEventListener('message', (e) => {
    console.log("收到的数据: ", e)
})
复制代码

postMessage是可以发送对象类型的，所以使用起来挺方便的

文章版权归作者所有，未经允许请勿转载。

THE END

前端

Invision Power Board PM跨站脚本攻击漏洞

java的下载及其安装

【python实战】怎么用python自动登录CSDN

The Edge eCommerce Shop ProductDetail.ASP 跨站脚本攻击漏洞

McAfee Internet Security Suite 2005不安全文件权限漏洞

phpSearch v4.3.0 – PHP搜索引擎源码

记录iframe

一. 页面如何嵌入iframe

二. 如何通信