BroadcastChannel是同源页面间广播通信的原生API，支持标签页、iframe等实时消息传递；需同源且注意兼容性与隐私模式限制，适用于多标签状态同步等场景。
JavaScript 中 BOM（Browser Object Model）本身没有原生的“广播”机制，但可以通过多个标准 Web API 组合实现跨页面数据通信，核心是利用同源窗口间的可访问性与事件机制。关键前提是：所有参与通信的页面必须同源（协议、域名、端口完全一致）。
使用 localStorage + storage 事件 实现轻量广播
这是最常用、兼容性好、无需额外服务端支持的方案。原理是：一个页面写入 localStorage，同源其他页面会触发 storage 事件。
- 发送方只需调用
localStorage.setItem('channel', JSON.stringify({ type: 'msg', data: 'hello' })) - 接收方监听
window.addEventListener('storage', e => { if (e.key === 'channel') console.log(JSON.parse(e.newValue)) }) - 注意：
storage事件不会在触发修改的页面自身触发（只通知其他同源 tab/window），适合真正的“广播”场景 - 需手动清理或使用唯一 key 避免污染，例如加时间戳或随机后缀
通过 postMessage + window.opener / window.open 精确通信
适用于有明确父子关系的页面（如弹窗、子页面），不依赖同域存储，也支持跨域（需校验 origin）。
- 父页打开子页后保存其引用：
const child = window.open('child.html') - 父页发送：
child.postMessage({ type: 'broadcast', payload: 'data' }, 'https://example.com') - 子页监听：
window.addEventListener('message', e => { if (e.origin === 'https://example.com') console.log(e.data) }) - 若要“广播”给多个子页，父页需维护子窗口引用数组并遍历
postMessage
借助 BroadcastChannel API（现代推荐）
专为同源页面间广播设计，语义清晰、性能好、自动清理，但兼容性要求 Chrome 54+/Firefox 38+/Edge 79+（Safari 15.4+ 支持）。
立即学习“Java免费学习笔记（深入）”；
- 所有页面创建同名频道：
const bc = new BroadcastChannel('my-app-channel') - 发送：
bc.postMessage({ event: 'user-login', userId: 123 }) - 接收：
bc.addEventListener('message', e => console.log(e.data)) - 页面关闭时自动关闭 channel，无需手动清理；支持
close()显式释放 - 不支持 IE，若需兼容旧浏览器，可用 localStorage 方案降级
补充说明：哪些方式不算真正“BOM 广播”
URL 参数、document.cookie、IndexedDB、Service Worker 消息等虽能传数据，但要么单次有效、要么需主动轮询、要么依赖额外上下文，不属于 BOM 层面的直接广播机制。WebSocket 或 SignalR 属于网络层，已超出 BOM 范畴。
