当前位置：首页 > 文章列表 > 文章 > 前端 > BroadcastChannelAPI：标签页通信新方案详解

BroadcastChannelAPI：标签页通信新方案详解

2026-03-25 08:39:39 0浏览收藏

Broadcast Channel API 是一种轻量、原生的浏览器跨标签页通信方案，让同一源下的多个页面能通过同名频道实时收发消息，轻松实现状态同步、操作通知等场景；它无需服务器或复杂存储，使用简单（仅需 new BroadcastChannel()、postMessage 和 onmessage），但需注意同源限制、数据可序列化要求、无消息顺序保证以及及时调用 close() 释放资源，是现代前端开发中高效且低侵入性的通信首选。

如何用Broadcast Channel API实现标签页通信？

Broadcast Channel API 是浏览器提供的一种轻量级跨标签页通信方式，允许同一源下的不同页面实例之间发送和接收消息。它使用简单，不需要依赖服务器或复杂的存储机制，适合实现页面间的状态同步、用户操作通知等场景。

创建和使用 BroadcastChannel

要使用 Broadcast Channel API，首先需要创建一个 BroadcastChannel 实例，传入一个通道名称（字符串），所有使用相同名称的频道可以互相通信。

示例代码：

const channel = new BroadcastChannel('my-channel');

// 发送消息
channel.postMessage('Hello from tab 1!');

// 接收消息
channel.onmessage = function(event) {
console.log('收到消息:', event.data);
};

只要多个标签页都连接到名为 'my-channel' 的频道，它们就能互相收发消息。

在实际页面中实现通信

假设你有两个页面（或同一个页面打开多个标签），可以通过以下方式实现双向通信：

每个页面都创建同名的 BroadcastChannel 实例
绑定 onmessage 事件来监听消息
调用 postMessage 发送数据

完整示例：

// page.js
const bc = new BroadcastChannel('chat');

bc.onmessage = (event) => {
  const msg = document.createElement('div');
  msg.textContent = '来自其他标签: ' + event.data;
  document.body.appendChild(msg);
};

// 点击按钮发送消息
document.getElementById('send').onclick = () => {
  bc.postMessage('我点击了按钮！');
};

在另一个标签页中运行相同代码，即可看到消息互通。