"BroadcastChannel：跨标签通信与状态同步"

---

title: "BroadcastChannel：跨标签通信与状态同步"

keywords:

• BroadcastChannel
• 跨标签
• 状态同步
• 选项卡通信
• postMessage

description: "介绍 BroadcastChannel 的跨标签通信模型与事件，如何进行会话状态同步、冲突处理与安全治理，并提供示例与参考。"

categories:

• 文章资讯
• 编程技术

---

概述

BroadcastChannel 允许同源的多个上下文（标签页、iframe、Service Worker）在命名频道上相互通信。适用于登录态更新、主题切换、队列控制等需要跨页面同步的场景。

示例

const ch = new BroadcastChannel('session')
ch.onmessage = e => {
  if (e.data.type === 'logout') { doLogout() }
}
// 发送消息
ch.postMessage({ type: 'logout' })
// 关闭频道
ch.close()

工程建议

• 频道命名：按功能划分频道；避免全局滥用导致噪声与冲突。
• 冲突与一致性：定义消息语义与优先级；对并发更新进行去重与最后写入胜出策略。
• 安全：仅在同源上下文使用；不要传递敏感数据给不可信子文档。

参考与验证

• MDN BroadcastChannel 文档：https://developer.mozilla.org/docs/Web/API/BroadcastChannel
• HTML 规范相关部分：https://html.spec.whatwg.org/