BroadcastChannel-[跨页面传值]

        之前有使用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 {*} callback 回调函数
 */
broadcaster.onMessage = function(eventKey, callback = (x) => x) {
    console.warn('消息订阅')
    this.channel.addEventListener('message', function(event) {
 

你可能感兴趣的:(WebGIS,前端,javascript,跨页面传值)