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