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) {
 
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是席木木啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值