如何在浏览器中跨标签间进行无刷新通信

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

• 创建通道:
  在每个要通讯的标签页中，通过new BroadcastChannel("channelName")创建一个新的BroadcastChannel对象，其中channelName是通道的名称（自定义），用于标识通信的通道，便于查找具有相同名称的标签页。

/* 在A标签页中创建BroadcastChannel实例 */
const channel = new BroadcastChannel("自定义 "); // 名称需要与B页统一，否则监听不到
/* 监听来自其他标签页的消息 */
channel.onmessage = function(event){
    console.log( "监听到消息: ", event.data);
};
/* 广播消息到B标签页 */
channel.postMessage("你好 B ，收到回复！");

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

/* 在B标签页中创建BroadcastChannel实例 */
const channel = new BroadcastChannel("自定义 "); // 名称需要与A页统一，否则监听不到
/* 监听来自其他标签页的消息 */
channel.onmessage = function(event){
    console.log("监听到消息: ", event.data);
    /* 接收到消息后，给A页面回文 */
    channel.postMessage( "你好A,  消息已收到" );
};

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

/* 广播消息到所有同域标签页 */
channel.postMessage( 'Hello World" );

• 注意：
  BroadcastChannel对象只能在同域环境的浏览器里进行通讯