Broadcast Channel 是什么？
BroadcastChannel 允许在相同的源（通常页面来自相同的网站）在浏览器上下文(windows,tabs,frames或者iframes)之间进行简单的通信.
通信的方式如图：
Broadcast Channel 与 window.postMessage区别
BroadcastChannel，叫做“广播频道”，官方文档说，该API是用于同源不同页面之间完成通信的功能。
与window.postMessage的区别：BroadcastChannel只能用于同源的页面之间进行通信，而window.postMessage却可以用于任何的页面之间，
基于BroadcastChannel的同源策略，它无法完成跨域的数据传输，跨域的情况，我们还是使用window.postMessage来处理
如何使用广播通信
Broadcast Channel 的 API 非常简单易用。
1、创建：首先我们会使用构造函数创建一个实例：
const bc = new BroadcastChannel('test_channel');
test_channel 参数用来指定channel的名称，用以标识这个 channel，在其他页面，可以通过传入相同的 name 来使用同一个广播频道，连接到相同名称的BroadcastChannel，可以监听到这个channel分发的消息。用 MDN 上的话来解释就是：
There is one single channel with this name for all browsing contexts with the same origin.
该 name 值可以通过实例的 bc.name属性获得。
2、监听消息：广播创建完成后，就可以在页面监听广播的消息：
bc.onmessage = function(e) {
console.log('receive:', e.data);
}; // 对于错误也可以绑定监听：
bc.onmessageerror = function(e) {
console.warn('error:', e);
};
除了为.onmessage赋值这种方式，也可以使用addEventListener来添加'message'监听。
3、发送消息：广播实例也有一个对应的postMessage用于发送消息：bc.postMessage('hello')
4、关闭广播监听：
可以看到，上述短短几行代码就可以实现多个页面间的广播通信，非常方便。而有时我们希望取消当前页面的广播监听：
（1）一种方式是取消或者修改相应的'message'事件监听
（2）另一种简单的方式就是使用 Broadcast Channel 实例为我们提供的close方法：bc.close();
两者是有区别的：
（1）取消'message'监听只是让页面不对广播消息进行响应，Broadcast Channel 仍然存在；
（2）而调用close方法这会切断与 Broadcast Channel 的连接，浏览器才能够尝试回收该对象，因为此时浏览器才会知道用户已经不需要使用广播频道了。
在关闭后调用postMessage会出现如下报错：
如果之后又再需要广播，则可以重新创建一个相同 name 的 Broadcast Channel。
兼容性
BroadcastChannel 是一个非常简单的 API ，内部包含了跨上下文同源通信的接口。它没有定义消息传输协议，故不同上下文中的不同文档需要自己实现。目前来看兼容性方面也基本没有问题。
网友评论