Broadcast Channel API是一种同源页面间通信的原生JavaScript方案，通过创建命名频道实现标签页间实时消息传递，支持对象数据传输，适用于登录状态同步、购物车更新等场景，使用postMessage发送消息并监听message事件接收，需注意仅限同源且不兼容老版IE，可结合localStorage作降级处理。
不同浏览器标签页之间通信在现代Web应用中很常见，比如用户在一个页面登录后，另一个页面需要同步登录状态。JavaScript的Broadcast Channel API提供了一种简单、原生的方式实现同源页面之间的实时通信。
什么是Broadcast Channel API
Broadcast Channel API允许你在同一个浏览器、同源（协议+域名+端口）下的多个渲染上下文（如页面、Worker）之间发送和接收消息。每个频道是一个命名的通道，任何加入该通道的页面都可以收发消息。
它使用起来非常直观：创建一个频道实例，通过postMessage()发送消息，通过监听message事件接收消息。
基本用法示例
以下是一个简单的跨标签页通信实现：
立即学习“Java免费学习笔记（深入）”；
1. 创建广播频道
const channel = new BroadcastChannel('my-channel');2. 发送消息
channel.postMessage({ type: 'USER_LOGIN', data: { user: 'Alice' } });
3. 接收消息
channel.onmessage = function(event) { const { type, data } = event.data; if (type === 'USER_LOGIN') { console.log('收到登录通知:', data.user); // 更新当前页面UI或状态 } };也可以使用addEventListener方式：
channel.addEventListener('message', (event) => { console.log('接收到消息:', event.data); });实际应用场景
常见的用途包括：
- 用户登录/登出状态同步：一个标签页登录后通知其他页面刷新认证状态
- 共享数据更新：如购物车数量在多个页面间保持一致
- 页面卸载通知：通过beforeunload事件通知其他页面自身即将关闭
- 主控页面与子页面协调：例如一个控制台页面控制多个展示页切换内容
注意事项与兼容性
使用时需注意几点：
- 仅限同源页面通信，跨域无效
- 消息只在打开期间有效，页面关闭后不再接收
- 支持结构化克隆算法，可传递对象、数组等，但不能传函数或DOM节点
- 目前主流浏览器都支持，但老版本IE不支持，使用前建议检测
检测是否支持：
if ('BroadcastChannel' in self) { // 可以安全使用 } else { // 需要降级方案，如localStorage + storage事件 }基本上就这些。Broadcast Channel API简洁高效，适合轻量级跨标签通信需求，不需要引入复杂的状态管理或后端支持。不复杂但容易忽略。
