浏览器悄悄上线了这个 API，大大简化了跨浏览器标签页通信

wangpeibao

2025-10-11

系统教程

过去，最常见的就是利用 localStorage 的 onstorage 事件监听来处理跨浏览器标签页通信，但其本职是存储，通信只是其副作用，且 API 不够直观。

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

什么是 BroadcastChannel？

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

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

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

1. 创建或加入一个频道

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

复制

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

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

2. 发送消息

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

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) => { ... });1.2.3.4.5.6.7.8.9.10.11.12.13.

4. 关闭频道

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

复制

// 当组件销毁或页面关闭时 window.onunload = () => { channel.close(); }; // 在 React 或 Vue 等框架中，可以在组件的卸载生命周期函数中调用 // useEffect(() => { // return () => channel.close(); // }, []);1.2.3.4.5.6.7.8.9.

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

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

THE END

2023 NVIDIA 初创企业展示 · 半程展示圆满收官

<<上一篇

黑客利用 macOS 内置防护功能部署恶意软件

下一篇>>