BroadcastChannel-[跨页面传值]

最新推荐文章于 2024-10-12 21:52:05 发布

是席木木啊

最新推荐文章于 2024-10-12 21:52:05 发布

阅读量563

点赞数 1

分类专栏： WebGIS 文章标签：前端 javascript 跨页面传值

本文链接：https://blog.csdn.net/weixin_43524214/article/details/127255374

版权

WebGIS 专栏收录该内容

104 篇文章 72 订阅 ¥199.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了如何使用BroadcastChannel进行跨页面传值，避免了window.postMessage需要引用iframe的限制，实现更自由的通信。通过封装的broadcastor.js库，展示了在父页面(index.html)订阅消息和子页面(child.html)发送消息的示例，实现了双向通信的效果。

摘要由CSDN通过智能技术生成

之前有使用window.postMessage和window.onMessage的方式跨页面传值操作，window.postMessage()方法可以安全地实现Window对象之间的跨域通信。但是这种方式不太好的地方在于：需要获取iframe标签元素的引用才能传值成功。基于BroadcastChannel的传值方法，可以摆脱这种弊端，实现更加自由的跨页面传值操作。

参考发布/订阅模式，基于BroadcastChannel简单封装的broadcastor.js脚本库源码如下，

/**
 * BroadcastChannel接口代理了一个命名频道-[同源下只包含一个命名频道],同源下,一个浏览器上下文只对应一个命名频道
 * @description 允许同源页面进行跨页面传值操作
 * @function 它允许同源的不同浏览器窗口、Tab 页、frame 或者 iframe 下的不同文档之间相互通信
 * @statement 兼容性:除了safari不支持，其它现在浏览器都支持
 */
//定义广播器-
const broadcaster = Object.create(null)
    //公共通信频道-{application}
broadcaster.channel = new BroadcastChannel('application')

/**
 * 消息订阅
 * @param {*} key 事件key值-唯一
 * @param {*} call