JavaScript的BroadcastChannel API是浏览器提供的原生接口，专门用于实现同源上下文之间的消息广播通信，支持同一站点下的不同标签页、iframe甚至worker之间传递数据，不需要额外的复杂配置。
BroadcastChannel API基础概念
BroadcastChannel的核心逻辑是创建一个指定名称的通道，所有订阅同一个通道名称的上下文都可以接收和发送消息，通道名称是区分不同通信通道的唯一标识，同源下的不同页面只要使用相同的通道名就能建立通信连接。
创建通道实例
使用BroadcastChannel构造函数即可创建通道实例，构造函数接收一个字符串参数作为通道名称：
// 创建一个名为test_channel的广播通道
const channel = new BroadcastChannel('test_channel');
发送消息
调用通道实例的postMessage方法即可发送消息，消息内容可以是任意可被结构化克隆算法处理的数据类型，包括字符串、对象、数组、二进制数据等：
// 发送字符串消息
channel.postMessage('这是一条测试消息');
// 发送对象消息
channel.postMessage({
type: 'update_data',
content: '最新数据内容',
timestamp: Date.now()
});
监听消息
给通道实例的onmessage属性绑定回调函数，或者监听message事件，就可以接收其他上下文发送的消息，回调函数的参数是一个MessageEvent对象，消息内容存在data属性中：
// 方式一：绑定onmessage属性
channel.onmessage = (event) => {
console.log('接收到消息：', event.data);
};
// 方式二：使用addEventListener监听事件
channel.addEventListener('message', (event) => {
console.log('接收到消息：', event.data);
});
关闭通道
当不再需要使用通道时，调用close方法可以关闭通道，释放相关资源，关闭后无法再发送和接收消息：
// 关闭通道 channel.close();
完整使用示例
下面是一个简单的跨标签页通信示例，两个同源页面使用同一个通道名，一个页面发送消息，另一个页面接收消息：
发送消息页面代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>发送消息页面</title>
</head>
<body>
<input type="text" id="msgInput" placeholder="输入要发送的消息">
<button id="sendBtn">发送消息</button>
<script>
const channel = new BroadcastChannel('page_communicate');
const sendBtn = document.getElementById('sendBtn');
const msgInput = document.getElementById('msgInput');
sendBtn.addEventListener('click', () => {
const msg = msgInput.value.trim();
if (msg) {
channel.postMessage(msg);
msgInput.value = '';
}
});
</script>
</body>
</html>
接收消息页面代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>接收消息页面</title>
</head>
<body>
<div id="msgContainer"></div>
<script>
const channel = new BroadcastChannel('page_communicate');
const msgContainer = document.getElementById('msgContainer');
channel.onmessage = (event) => {
const p = document.createElement('p');
p.textContent = `接收到消息：${event.data}`;
msgContainer.appendChild(p);
};
</script>
</body>
</html>
使用限制和注意事项
- 同源限制：只有同源的页面才能通过同一个BroadcastChannel通道通信，协议、域名、端口任意一个不同都无法建立连接。
- 通道名称区分大小写：创建通道时名称的大小写不同会被视为不同的通道，无法互相通信。
- 消息大小限制：虽然支持结构化克隆的数据类型，但过大的消息会影响通信性能，建议传递必要的最小数据量。
- 兼容性：大部分现代浏览器都支持该API，如果需要兼容旧版本浏览器，需要做特性检测或者准备降级方案。
常见应用场景
- 多标签页数据同步：比如用户在一个标签页修改了个人设置，其他标签页可以实时同步更新。
- 跨iframe通信：父页面和多个同源iframe之间可以通过该API传递消息，不需要使用
postMessage的复杂配置。 - 多页面状态共享：比如登录状态、购物车数据等，在一个页面修改后其他页面可以及时感知。
- 多worker通信：多个同源的Web Worker之间也可以通过BroadcastChannel实现消息传递。
特性检测代码示例：
// 检测浏览器是否支持BroadcastChannel
if ('BroadcastChannel' in window) {
console.log('当前浏览器支持BroadcastChannel API');
} else {
console.log('当前浏览器不支持BroadcastChannel API，需要降级处理');
}
BroadcastChannelJavaScript跨页面通信消息通道修改时间：2026-06-30 06:00:30