标签页通信-BroadcastChannel

BroadcastChannel API用于在浏览器中实现跨标签页通信。它允许不同标签页之间以及同一浏览器会话中的所有标签页之间共享消息和数据。

创建通道：在一个标签页中，通过 new BroadcastChannel(channelName) 创建一个新的BroadcastChannel对象，其中channelName是通道的名称，用于标识通信的通道。

发送消息：通过调用BroadcastChannel对象的 postMessage(message) 方法向该通道发送消息，其中message是要发送的消息数据。该消息将被广播给所有订阅了该通道的标签页。

监听消息：通过为BroadcastChannel对象的 onmessage 属性分配一个事件处理函数，可以监听来自其他标签页的消息。当有消息发送到该通道时，所有订阅了该通道的标签页都会触发其对应的事件处理函数，并接收到相同的消息数据。

同步和异步：BroadcastChannel API提供了同步和异步的方式来发送和接收消息。对于同步方式，消息将立即发送到其他标签页，并且发送消息的标签页会等待直到其他标签页都接收到了该消息才会继续执行。而异步方式下，消息发送后，发送消息的标签页不会等待其他标签页的接收确认，而是立即继续执行后续代码。

需要注意的是，BroadcastChannel API只能在同一浏览器会话中的不同标签页之间进行通信。不同浏览器之间或不同设备之间无法进行通信。

使用BroadcastChannel API可以实现一些常见的应用场景，例如在多个标签页之间实时同步应用程序的数据和状态，共享用户操作和事件等。但需要注意有些浏览器可能不支持或支持不完全，请在使用前参考相关浏览器的兼容性信息。

// 在标签页A中创建BroadcastChannel
var channel = new BroadcastChannel('myChannel');

// 监听来自其他标签页的消息
channel.onmessage = function(event) {
  console.log('Received message:', event.data);
};

// 在标签页B中创建BroadcastChannel，并监听消息
var channel = new BroadcastChannel('myChannel');

channel.onmessage = function(event) {
  console.log('Received message:', event.data);
};

// 发送消息到所有其他标签页
channel.postMessage('Hello from Tab B');