万维网使用的网站,做网站服务器硬盘多大,常用的免费ppt模板,安康市网页设计培训背景
当我们的Web页面需要复用现有网站的页面时#xff0c;我们通常会考虑代码层面的抽离引用#xff0c;但是对于一些过于复杂的页面#xff0c;通过 iframe 嵌套现有的网站页面也是一种不错的方式#xff0c;。目前我就职的项目组就有多个业务利用 iframe 完成业务的复用…背景
当我们的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 idchild-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页面间的通信可就太简单了。
