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

2023-12-13 06:39:18

背景

当我们的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页面间的通信可就太简单了。

文章来源:https://blog.csdn.net/m0_37890289/article/details/134959450
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。