Broadcast Channel 是什么?
在前端,我们经常会用postMessage来实现页面间的通信,但这种方式更像是点对点的通信。对于一些需要广播(让所有页面知道)的消息,用postMessage不是非常自然。Broadcast Channel 就是用来弥补这个缺陷的。
顾名思义,Broadcast Channel 会创建一个所有同源页面都可以共享的(广播)频道,因此其中某一个页面发送的消息可以被其他页面监听到。
下面就来速览一下它的使用方法。
如何使用?
Broadcast Channel 的 API 非常简单易用。
创建
首先我们会使用构造函数创建一个实例:
const bc = new BroadcastChannel('alienzhou');
可以接受一个DOMString作为 name,用以标识这个 channel。在其他页面,可以通过传入相同的 name 来使用同一个广播频道。用 MDN 上的话来解释就是:
There is one single channel with this name for all browsing contexts with the same origin.
该 name 值可以通过实例的.name属性获得
console.log(bc.name);// alienzhou
监听消息
Broadcast Channel 创建完成后,就可以在页面监听广播的消息:
bc.o