BroadcastChannel 详解及注意项

简介

BroadcastChannel，可以跨页面传输数据。

使用

初始化

let CHANNEL_CODE = 'test1'
let listenChannel = new BroadcastChannel(CHANNEL_CODE);

监听

listenChannel.onmessage = () => {
    console.log(res);
};
// 或者
listenChannel.addEventListener('message', (res) => {
    console.log(res);
});

发送

new BroadcastChannel(CHANNEL_CODE).postMessage(data);

关闭

var listenChannel = new BroadcastChannel(CHANNEL_CODE);
listenChannel.close();

或者删除掉监听，会被内存回收掉。

let CHANNEL_CODE = 'test1'
let listenChannel = new BroadcastChannel(CHANNEL_CODE);
let fn = function(res){
    console.log(res);
}
listenChannel.addEventListener('message', fn);
listenChannel.removeEventListener('message', fn);

注意

1.关于跨域

结论BroadcastChannel不能跨域传输。 尝试了一下，

再百度主页面去监听，百度贴吧去发送。发现主页面并不能打印出结果。

2.关于发送

当监听和发送使用同一个broadcastChannel实例的时候，发送的消息不能被监听到。

只能监听到别的实例发送的数据。

3.关于销毁

不需要使用的时候切记消除监听！！！ 会导致不能被内存回收。在vue组件中使用的时候会导致组件回收出现问题。

引用

MDN BroadcastChannel详解