by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11507
本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。

一、之前postMessage的局限

在12年的时候，乖乖，12年啊，都十几年前了，我有写过关于postMessage的跨页面通信的文章，见这里。

结果这么多年下来，在生产环境使用上述postMessage通信的机会屈指可数，这种跨页面通信平常的交互式页面是鲜有机会接触的。

然后，现在有多了个Broadcast Channel API，也是实现页面见通信的。

和十多年前的这个通信区别在于，这个是广播式的，而非点对点。

所谓广播通信，就是所有域名相同的页面，A发送消息，其他所有页面都能接收到，这在需要数据实时同步的场合非常有用。

二、Broadcast Channel使用挺简单的

Broadcast Channel API看起来复杂，实际使用简单地出乎意料，我想，最复杂的应该就是这个API的拼写了。

是这样的，所有需要通信的页面都new一个相同的广播通道，就像这里：

const bc = new BroadcastChannel('zhangxinxu');

然后一个页面发送，就像这样：

bc.postMessage('欢迎支持正版书籍');

然后其他页面就能接收到这个信息：

const bc = new BroadcastChannel('zhangxinxu');
bc.onmessage = function (event) {
    console.log(event.data);
    // 输出'欢迎支持正版书籍'
};

就这样结束了。

三、演示案例

为了演示方便，我使用iframe将数个页面击中在了一起，左侧是主页面，右侧分别是iframe-a.html和iframe-b.html。

这三个页面都创建了一个同名的BroadcastChannel对象。

主页面发送，两个iframe内嵌页接受，结果，当我们点击按钮的时候，如下图所示：

右侧的iframe页面就接受到了发送的信息，如下截图所示：

我们还可以修改输入框的内容，查看发送不同信息的结果，例如，我们厂最近热播的《大奉打更人》和《国色芳华》

Demo访问

您可以狠狠地点击这里：Broadcast Channel API使用示意demo

四、兼容性和其他

目前广播通信API的兼容性还是很不错的，caniuse网站截图：

BroadcastChannel不仅可以用在window上下文环境中，在Web Worker中也是可以自如使用的。

不仅可以是iframe间广播通信，各个浏览器选项卡之间通信也是可以的，这里我就不重复演示了，肯定是支持的。

通道名字获取与关闭

通道名字可以使用name属性值获取，例如：

console.log(bc.name);
// 输出结果是：zhangxinxu

如果想要关闭通道，可以使用close()方法。

bc.close();

通道一旦关闭，你再使用postMessage()发送数据就会报错，或者使用message事件接收数据也不会成功，反而会触发messageerror事件。

在上面的demo中，通信讯息的接受用的是onmessage方法，实际上，使用addEventListener去绑定事件也是可以的，例如：

bc.addEventListener("message", (event) => {
  console.log(event.data);
})

五、结语点点点

说啥结语，想不到啥，小朋友放寒假了，时间过得好快，要过年了，明年40了。

哦，对了，年终总结忘记写了。

年前抽时间写一下吧，好好想想怎么写。

行吧，就这些吧，表达欲不是年轻的时候了。

感谢阅读，尤其这么多年还在关注我的小伙伴们。

如果可以，希望可以顺手下，比心。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11507

（本篇完）