前端跨页面通信之Broadcast Channel面试中有被问到浏览器中不同tab之间如何交换数据，一脸懵逼，回来补课。

面试中有被问到浏览器中不同tab之间如何交换数据，一脸懵逼，回来补课。

全局对象只在自身项目中有用，并不会在不同的tab中共享，度娘中了解到前端广播式通信-Broadcast Channel。

顾名思义，“广播频道”，官方文档里的解释为“用于同源不同页面之间完成通信的功能”，在其中某个页面发送的消息会被其他页面监听到。

注意“同源”二字，该方法无法完成跨域的数据传输。

创建

首先使用构造函数创造一个实例：

const bc=new BroadcastChannel（'Sunny'）;

可接受一个字符串参数作为name，以标识channel。就像广播台中，同样的name值会被接入到相同的广播频道中。

这个name值是可以通过实例的.name值获取的。

接收消息

创建完成后，可以在页面监听消息：

bc.onmessage=function(e){
    console.log(e);
}

实质是在页面添加了onmessage事件，当接收到其他同源页面相同频道发送的消息时，触发该事件。

除了onmessage方式，还可以通过addEventListener来添加message接收事件：

bc.addEventListener("message",function(e){
    console.log(e.data);
})

发送消息

可以接收消息，发送就很简单了

bc.postMessage(data);

使用postMessage就可以发送data到bc所在的频道，所有接入该频道的页面都能接收到消息。因为浏览器的差异，数据的类型建议选择string。

关闭

如果希望取消当前页面的数据监听，有以下两种方法：

bc.close();

第一种方式只是让页面不对消息进行响应，广播仍存在；close方法会切断与广播的连接。

兼容性

前端er最关注的兼容问题，见下：

可通过caniuse查询

参考：