如何利用 Broadcast Channel API 实现同源下不同浏览器窗口间的通信？

Broadcast Channel API 可实现同源页面间通信，通过创建指定名称的频道实例收发消息，支持结构化数据传输，需注意同源策略、统一消息格式、及时关闭频道及错误处理。

Broadcast Channel API 是浏览器提供的一种简单机制，用于在同源的不同浏览器窗口、标签页或 iframe 之间进行实时通信。只要页面的协议、域名和端口相同，就可以通过它发送消息。

创建和使用 BroadcastChannel 实例

要使用该 API，先用一个指定的频道名称创建 BroadcastChannel 对象。所有同源下使用相同名称的频道可以互相收发消息。

在两个不同的标签页中运行以下代码，它们就能互相通信。

打开频道并监听消息：
const channel = new BroadcastChannel('my-channel');
channel.onmessage = function(event) {
  console.log('收到消息:', event.data);
};

发送消息：
channel.postMessage('你好，其他窗口！');

处理消息类型和数据格式

postMessage 支持发送结构化数据，如字符串、对象、数组等，内部使用结构化克隆算法序列化数据。

常见做法是统一消息格式，便于识别和处理：

• { type: 'USER_LOGIN', data: { userId: 123 } }
• { type: 'SYNC_PREFERENCES', theme: 'dark' }

接收方根据 type 字段判断消息用途，执行相应逻辑。

微信 WeLM

WeLM不是一个直接的对话机器人，而是一个补全用户输入信息的生成模型。

33

查看详情

注意资源清理与错误处理

长时间运行的页面应避免内存泄漏，建议在不需要时关闭频道。

关闭频道：
channel.close(); // 停止接收和发送

可在页面卸载前调用：

window.addEventListener('beforeunload', () => {
  channel.close();
});

同时监听 error 事件，及时发现异常：

channel.onerror = (err) => {
  console.error('广播通道出错:', err);
};

基本上就这些。Broadcast Channel API 简单直接，适合轻量级跨标签通信，比如状态同步、用户行为通知等场景。不复杂但容易忽略的是确保同源策略和正确关闭资源。

以上就是如何利用 Broadcast Channel API 实现同源下不同浏览器窗口间的通信？的详细内容，更多请关注php中文网其它相关文章！