BroadcastChannel 浏览器跨标签页通信 API

BroadcastChannel 是浏览器原生提供的跨标签页通信 API‌，能让同源的多个页面（标签页、窗口或 iframe）通过同一个频道实时互相发消息，不用搭后端就能实现多页面状态同步 。‌‌‌

快速上手

1. ‌创建频道‌：所有页面用相同频道名实例化，如 const channel = new BroadcastChannel('myChannel')，频道名大小写敏感 。
2. ‌发送消息‌：用 postMessage() 发送任意可序列化数据，如 channel.postMessage({type: 'login', data: 'user123'})，发送方自身不会收到自己发的消息 。
3. ‌接收消息‌：监听 onmessage 或 addEventListener('message') 事件，通过 event.data 获取收到的内容 。
4. ‌关闭频道‌：页面卸载前调用 channel.close() 释放资源，可绑定 beforeunload 事件自动关闭 。‌‌‌

什么情况下能用

• ‌必须同源‌：协议、域名、端口三者完全一致才能通信，https://example.com 和 https://sub.example.com 不算同源 。
• ‌支持多页面‌：标签页、新窗口、同源 iframe 都能加入同一个频道互通消息 。
• ‌现代浏览器都支持‌：Chrome、Firefox、Edge 稳定支持，Safari 15.4+ 可用，IE 浏览器不支持 。‌‌‌

实际能用来干嘛

• ‌登录状态同步‌：一个标签页退出登录后，其他标签页自动登出并跳转登录页 。
• ‌多页面协作‌：如本地小游戏，一个标签控制球拍，另一个标签显示游戏画面实时同步数据 。
• ‌消息通知‌：收到新消息时在所有页面统一显示通知提醒 。
• ‌购物车共享‌：多个标签页操作同一购物车时实时同步商品信息 。‌‌‌

‌注意别踩坑‌：不要重复创建同名频道导致重复监听，消息不保证送达顺序，高频率发送需考虑性能影响，隐私模式下部分浏览器可能禁用该 API。‌‌‌