BroadcastChannel是同源页面间广播通信的原生API，支持标签页、iframe等实时消息传递；需同源且注意兼容性与隐私模式限制，适用于多标签状态同步等场景。
BroadcastChannel 是浏览器原生提供的、用于同源（same-origin）页面间通信的轻量级 API，无需服务端参与，适合标签页、iframe 或弹出窗口之间的实时消息广播。
基本用法：创建通道并收发消息
所有使用相同 channelName 的 BroadcastChannel 实例，自动组成一个广播组。只要同源，无论是否同一窗口、标签页或 iframe，都能收到广播。
- 创建通道：
const bc = new BroadcastChannel('my-channel'); - 发送消息：
bc.postMessage({ type: 'refresh', data: 'updated' });（支持任意可序列化值） - 监听消息：
bc.addEventListener('message', event => console.log(event.data)); - 关闭通道（建议在不需要时调用）：
bc.close();
关键注意事项：同源与兼容性
同源指协议、域名、端口三者完全一致。例如 https://example.com 和 https://sub.example.com 不同源，无法通信。
- Chrome、Firefox、Edge（Chromium 内核）、Safari 15.4+ 均已支持；旧版 Safari 需谨慎对待
- 隐私模式下部分浏览器可能禁用 BroadcastChannel（如 Safari 无痕窗口默认禁用）
- iframe 必须与父页面同源，且嵌入页面本身也需显式创建同名 channel 才能收发
实用场景示例：多标签页状态同步
比如用户在一个标签页退出登录，其他标签页需立即登出并跳转登录页。
立即学习“Java免费学习笔记（深入）”；
- 登出时广播：
bc.postMessage({ action: 'logout', timestamp: Date.now() }); - 各页面监听并响应：
if (event.data.action === 'logout') { localStorage.removeItem('token'); location.href = '/login'; } - 配合 localStorage + storage 事件可做降级方案，但 BroadcastChannel 更及时、不依赖存储变更
避免常见陷阱
BroadcastChannel 简单但容易误用，注意以下几点：
- 不要在未关闭前重复 new 同名 channel —— 可能导致重复监听或内存泄漏
- 消息不保证送达顺序，也不保证 100% 可达（极端情况下如页面正在卸载可能丢失），敏感操作建议加业务校验
- 不能跨域，也不能用于 Service Worker（SW 有专用的
clients.matchAll()+postMessage） - 监听函数内避免执行耗时操作，否则可能阻塞后续消息处理
