浏览器新增这个 API，让跨浏览器标签页通信更简单

以前我们前端处理跨浏览器标签页通信通常都是利用 localStorage 的 onstorage 事件监听，但其本身是用来做存储，通信呢只是其副作用，而且 API 不够直观。

现代浏览器已经为我们提供了一个专门为此场景设计的、更优雅、更高效的解决方案。

什么是 BroadcastChannel？

BroadcastChannel API 允许来自同源的浏览器不同上下文（如标签页、窗口、iframe）之间进行通信。

其核心特点是：

同源限制、发布/订阅模式且角色可以互换、基于消息事件对高效通信、支持复杂数据，无需手动序列化。

它的 API 非常简洁，主要包含创建、发送、接收和关闭四个步骤。

1. 创建或加入一个频道

要进行通信，首先需要创建一个 BroadcastChannel 实例，并给它指定一个唯一的频道名称。所有希望通信的页面都必须使用相同的频道名称。

// 创建一个名为 'user_status_channel' 的频道
const channel = new BroadcastChannel('user_status_channel');

如果名为 user_status_channel 的频道已存在，这行代码会加入该频道；如果不存在，则会创建它。

2. 发送消息

创建实例后，使用 postMessage() 方法向频道广播消息。所有监听该频道的其他标签页都会收到此消息。

//发送一个对象作为消息
channel.postMessage({
    type: 'login',
    user: 'Alice',
    timestamp: Date.now()
});
// 也可以发送字符串、数字等
// channel.postMessage('Hello everyone!');

postMessage() 的强大之处在于它可以发送各种复杂的数据结构，包括对象、数组、Map、Set、File 对象等，浏览器会自动处理序列化和反序列化。

3. 接收消息

通过监听 message 事件来接收广播。事件对象 event 中包含了我们最关心的 data 属性，也就是发送方传递的消息。

channel.onmessage = (event) => {
 console.log('收到消息:', event.data);

 // 根据消息内容执行相应操作
 if (event.data && event.data.type === 'login') {
    updateUIForLogin(event.data.user);
  } else if (event.data && event.data.type === 'logout') {
    updateUIForLogout();
  }
};

// 也可以使用 addEventListener
// channel.addEventListener('message', (event) => { ... });

4. 关闭频道

当页面不再需要接收或发送消息时（例如，在组件卸载或页面关闭时），应该调用 close() 方法来关闭频道，以释放资源。

// 当组件销毁或页面关闭时
window.onunload = () => {
  channel.close();
};

// 在 React 或 Vue 等框架中，可以在组件的卸载生命周期函数中调用
// useEffect(() => {
//   return () => channel.close();
// }, []);

BroadcastChannel API 是实现同源跨标签页通信的现代化标准方案，具有简洁的 API、强大的功能和优秀的性能，完美地解决了 localStorage hack 方案的各种痛点。

至于兼容性，只要不用 IE 就行。

以上关于浏览器新增这个 API，让跨浏览器标签页通信更简单的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。