一. 页面如何嵌入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
是可以发送对象类型的,所以使用起来挺方便的