概述

浏览器标签其实可以相互进行通信，需要用到BroadcastChannel,关于BroadcastChannel，MDN 上是这样介绍的：

• 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。

和MessageChannel的不同

在中提到的浅谈 MessageChannel (opens new window)中提到的MessageChannel适用于两个线程之间的通信，而BroadcastChannel可以用于两个不同进程之间的通信。

BroadcastChannel的语法

BroadcastChannel可以通过构造函数生成一个实例，然后通过实例监听消息、发送消息，如下：

const channel = new BroadcastChannel("myChannel"); //接收一个参数name，这个名称在同一域名下的不同页面之间必须是唯一的

channel.onmessage = (event) => {
  ...
};

const sendMessage = (message) => {
  channel.postMessage(message);
};

channel.onmessageerror=(error)=>{
  ...
}

示例

一个简单的示例可参考Box 在不同 tab 无缝移动 (opens new window)