iframe 与主应用页面之间如何互相通信传递数据

背景

当我们的Web页面需要复用现有网站的页面时，我们通常会考虑代码层面的抽离引用，但是对于一些过于复杂的页面，通过 iframe 嵌套现有的网站页面也是一种不错的方式，。目前我就职的项目组就有多个业务利用 iframe 完成业务的复用。

虽然对于用户而言，看到的页面其实是一个整体，但是本质上是两个甚至多个页面的组装，那么页面跟页面之间的交互就避免不了相互通信。

问题

比如下图中的组合方式，B页面即父页面是主站点页面，这个页面中有一部分功能是A页面已经运行运行很久的功能。为了让B页面直接能够使用A页面的内容， iframe 是不错的技术选型。

现在有两个问题

1. A页面成功加载后通知B页面；
2. B页面有个按钮，点击后希望A页面中切换页面；

根据上面的两个问题，我们不难想到这就是父页面跟子页面直接互相通信的问题，那么如何实现iframe嵌套页面之间的互相通信呢？

通信方式

父页面 ? 子页面

💡 主页面向iframe页面传参

首先需要在子页面中注册 message事件的监听

window.addEventListener('message', function (event) {
  params = JSON.parse(event.data);

	// 处理父页面的信息，然后做对应的逻辑

})

父页面向子页面发送 message信息:

1. 获取到iframe的实例
2. 向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页面间的通信可就太简单了。