背景
当我们的Web页面需要复用现有网站的页面时，我们通常会考虑代码层面的抽离引用，但是对于一些过于复杂的页面，通过 iframe 嵌套现有的网站页面也是一种不错的方式，。目前我就职的项目组就有多个业务利用 iframe 完成业务的复用。
虽然对于用户而言，看到的页面其实是一个整体，但是本质上是两个甚至多个页面的组装，那么页面跟页面之间的交互就避免不了相互通信。
问题
比如下图中的组合方式，B页面即父页面是主站点页面，这个页面中有一部分功能是A页面已经运行运行很久的功能。为了让B页面直接能够使用A页面的内容， iframe 是不错的技术选型。
现在有两个问题
- A页面成功加载后通知B页面；
- B页面有个按钮，点击后希望A页面中切换页面；
根据上面的两个问题，我们不难想到这就是父页面跟子页面直接互相通信的问题，那么如何实现iframe嵌套页面之间的互相通信呢？
通信方式
父页面 ⇒ 子页面
💡 主页面向iframe页面传参
首先需要在子页面中注册 message事件的监听
window.addEventListener('message', function (event) {
params = JSON.parse(event.data);
// 处理父页面的信息，然后做对应的逻辑
})
父页面向子页面发送 message信息:
- 获取到iframe的实例
- 向iframe实例发送消息
<iframe id="child-page" src={src} />
function sendMessage(){
const childPageIframe = document.getElementById('child-page');
const params = { type:"switch-page", message: "切换页面"}
childPageIframe.contentWindow.postMessage(JSON.stringify(params))
}
子页面 ⇒ 父页面
💡 iframe页面向主页面传参
首先在父页面中注册 message事件的监听
window.addEventListener('load', function (e) {
const handleEvent = (e: MessageEventParams) => {
const { type, event, params } = e.data || {}
if (acceptEvents && (acceptEvents.includes(type) || acceptEvents.includes(event))) {
onMessageChange?.(type || event, params)
}
}
window.addEventListener('message', handleEvent)
}
子页面向父页面发送 message信息
// iframe
window.parent.postMessage(JSON.stringify({
from: 'auth',
event: 'close',
code: 1
}), '*')
总结
iframe 页面之间的通信主要是通过监听页面的全局 message事件，然后其他页面通过 postMessage方法向目标页面发送信息。双向通信都是这样的逻辑，所以掌握了这个核心，iframe页面间的通信可就太简单了。
