标签页间通信

本文基于 B 站「渡一教育」视频《标签页间通信》整理，覆盖核心概念、通信方案、API、对比与安全。https://www.bilibili.com/video/BV1rzoaBNEPf/?t=6&spm_id_from=333.1007.tianma.2-1-3.click&vd_source=ac6ab4c3cdc5d0193edf55fd77ba0b4f

---

一、核心概念

• 标签页间通信：同一浏览器下多个标签页之间进行数据传递、状态同步。

• 同源策略：协议、域名、端口完全一致为同源；跨源场景下多数 API 受限。

• 通信目标：实时、可靠、安全地在页面间传递消息。

---

二、主流实现方式

localStorage + storage 事件（同源） - 本地存储 / 本地缓存

• 原理：同源页面共享 localStorage，通过 storage 事件监听数据变化。

• 优点：简单、兼容性好、无需额外依赖。

• 缺点：仅支持同源；数据量大时性能一般。

• 关键 API javascript运行

// 发送
localStorage.setItem('msg', JSON.stringify(data))
// 接收
window.addEventListener('storage', e => {
  console.log(e.key, e.newValue)
})

BroadcastChannel-频道（同源） - 广播频道

• 原理：同源页面加入同一频道，实现广播通信。

• 优点：API 简洁、支持一对多、使用直观。

• 缺点：仅同源。

• 关键 API javascript运行

const channel = new BroadcastChannel('my-channel')
// 发送
channel.postMessage(data)
// 接收
channel.onmessage = e => console.log(e.data)

window.postMessage（支持跨源）- 跨窗口消息通信

• 原理：通过窗口引用发送消息，可指定目标源，支持跨源。

• 优点：支持跨源、灵活、适用范围广。

• 缺点：需要获取窗口引用；必须做安全校验。

• 关键 API javascript运行

// 发送
targetWindow.postMessage(data, 'https://target.com')
// 接收
window.addEventListener('message', e => {
  if (e.origin !== '可信源') return
  console.log(e.data)
})

SharedWorker（同源）- 共享工作器 / 共享线程

• 原理：同源页面共享一个后台线程，由线程转发消息。

• 优点：不阻塞主线程、适合高频 / 大量通信。

• 缺点：写法复杂、仅同源、调试稍麻烦。

---

三、方案对比

表格

方案	同源 / 跨源	优点	缺点
localStorage	同源	简单、稳定	仅同源、有延迟
BroadcastChannel	同源	广播、易用	仅同源
postMessage	均可	跨源、强大	需窗口引用、需验源
SharedWorker	同源	后台线程、高效	写法复杂

---

四、使用建议

1. 同源简单同步：优先 BroadcastChannel

2. 老项目 / 兼容场景：使用 localStorage

3. 跨源通信：必须用 postMessage，并校验 origin

4. 高频大数据：使用 SharedWorker

---

五、安全要点

• postMessage 必须校验消息来源 origin

• 不直接执行跨源传来的代码 / HTML

• 不在 localStorage 存储敏感信息

• 避免使用 * 作为目标源