页面通信策略

页面通信本质分 3 类：

1. 同源页面通信 2. 跨源页面通信 3. 不同上下文（Tab / iframe / Worker）

一、同源页面通信

同协议 + 域名 + 端口

1. localStorage / sessionStorage

基于：Web Storage API

localStorage.setItem('msg','hello')

监听：

window.addEventListener('storage',(e)=>{console.log(e.key,e.newValue)})

• ✅ 跨 Tab 通信
• ❌ 当前页面不会触发
• ❌ 只能字符串

2. BroadcastChannel

基于：BroadcastChannel

constchannel=newBroadcastChannel('test')channel.postMessage('hello')channel.onmessage=(e)=>{console.log(e.data)}

• API 简单
• 支持多 Tab
• 实时通信
• 兼容性略差（老浏览器）

3. window.open + window.opener

constchild=window.open('/page')child.postMessage('hello','*')

父子页面通信

4. SharedWorker

多页面共享一个 worker

多个 tab → 同一个 worker → 中转通信

二、跨源页面通信

不同域名（比如 iframe）

1. postMessage

基于：Window.postMessage

// 发送iframe.contentWindow.postMessage('hello','https://a.com')// 接收window.addEventListener('message',(e)=>{if(e.origin==='https://a.com'){console.log(e.data)}})

• 支持跨域
• 安全（可校验 origin）
• 最通用

必须校验 origin，否则有安全风险

2. iframe + URL 参数（

iframe src="https://a.com?msg=hello"

通过 URL 传参

• 不实时
• 只能单向
• 不安全

页面通信方式可以分为同源和跨源两类。同源场景下可以使用 localStorage、BroadcastChannel 或 SharedWorker 实现多 Tab 通信；跨源场景下主要使用 postMessage，它通过消息机制实现不同窗口间安全通信。