前端跨页面通信

1️⃣ 常见跨页面通信方法包括：

• ∙window.postMessage（跨域/跨窗口通信，最通用、最安全，推荐 ✅）
• ∙BroadcastChannel（同源多 Tab 广播通信，简单高效，推荐 ✅）
• ∙localStorage + storage 事件（同源页面间通过存储变化通信）
• ∙SharedWorker（共享线程，适合复杂状态同步）
• ∙URL / Hash 传参（适用于页面跳转传参，非实时）
• ∙WebSocket（配合服务端）（高级实时通信方案）

---

2️⃣ 如何选择？

• ∙同源且需要简单广播？ → BroadcastChannel
• ∙跨域或跨窗口通信？ → window.postMessage
• ∙跨页面轻量传参？ → URL 参数
• ∙高级实时同步？ → WebSocket / SharedWorker

---

✅ 三、1. window.postMessage（推荐 ✅，最通用）

---

🎯 作用：

允许来自不同窗口/iframe/Tab 的 JavaScript 通过消息机制进行跨域或同源通信，是最通用、最安全的跨页面通信方式。

---

📘 基本用法：

发送方（A 页面）：

const childWindow = window.open('https://other-domain.com/pageB');
 // 或 iframe.contentWindow
childWindow.postMessage({ type: 'greet', message: 'Hello from A!' }, '*'); 
// 第二个参数是目标 origin，建议明确指定

接收方（B 页面）：

window.addEventListener('message', (event) => {
  // 注意校验来源，防止恶意攻击
  // if (event.origin !== 'https://trusted-domain.com') return;

  console.log('收到消息:', event.data); 
// { type: 'greet', message: 'Hello from A!' }
});

---

✅ 优点：

• ∙支持 跨域通信（只要目标页面允许）
• ∙支持 跨 Tab、跨窗口、跨 iframe
• ∙灵活性强，可传递任意数据结构
• ∙是官方标准 API，兼容性好

---

⚠️ 注意事项：

• ∙一定要 验证 event.origin，防止恶意页面发送消息（安全考虑）
• ∙适用于 主动通信，需要一方主动发送，另一方监听

---

✅ 四、2. BroadcastChannel

---

🎯 作用：

允许 ​ 同源 ​ 的多个浏览器 Tab、窗口、iframe 通过一个频道名称进行广播式通信，非常简洁高效。

---

📘 基本用法：

所有页面：

// 创建一个同名频道
const channel = new BroadcastChannel('my_channel');

// 发送消息
channel.postMessage({ type: 'update', data: 'Something changed!' });

// 接收消息
channel.onmessage = (event) => {
  console.log('收到广播消息:', event.data);
};

---

✅ 优点：

• ∙API 简单，语义清晰
• ∙支持同源多页面实时通信
• ∙无需关心谁发送谁接收，类似 "发布-订阅" 模式

---

⚠️ 缺点：

• ∙仅限同源页面之间通信
• ∙兼容性：现代浏览器都支持，但 IE 不支持（可用 polyfill 或降级方案）

---

✅ 五、3. localStorage / sessionStorage + storage 事件（同源通信）

---

🎯 原理：

当某个页面修改了 localStorage，同源的其他页面会触发 storage 事件，这样就可以实现间接的通信。

---

📘 基本用法：

页面 A（发送消息）：

localStorage.setItem('cross_page_msg', JSON.stringify({ type: 'alert', text: 'Hello!' }));

页面 B（接收消息）：

window.addEventListener('storage', (event) => {
  if (event.key === 'cross_page_msg') {
    const data = JSON.parse(event.newValue);
    console.log('收到 storage 消息:', data);
  }
});

---

✅ 优点：

• ∙简单，基于已有存储 API
• ∙同源页面间有效

---

⚠️ 缺点：

• ∙只有存储发生变化时才会触发 storage 事件 ，而且 当前页面修改 localStorage 不会触发自己的 storage 事件（只有其他页面会触发）
• ∙不能用于实时高频通信
• ∙数据量不宜过大

---

✅ 六、4. SharedWorker（高级用法，多页面共享线程）

---

🎯 作用：

SharedWorker 是一种浏览器提供的 "共享后台线程"，多个页面可以连接到同一个 SharedWorker，通过它来进行数据通信和状态共享。

---

✅ 优点：

• ∙可以作为多个页面之间的 通信桥梁 / 共享状态管理器
• ∙适合复杂场景，比如多个页面共享数据、同步状态

---

⚠️ 缺点：

• ∙API 较复杂，兼容性稍差（IE 不支持）
• ∙需要自行实现消息分发逻辑

---

✅ 七、5. Service Worker（PWA / 推送场景，较复杂）

---

🎯 作用：

Service Worker 是运行在浏览器背后的脚本，通常用于 离线缓存、消息推送、后台同步 ，也可以用来做多页面之间的消息中转（结合 MessageChannel）。

---

⚠️ 适用场景较特殊，一般不作为常规跨页面通信首选。

---

✅ 十、8. WebSocket（高级用法，通常配合服务端）

---

🎯 如果多个页面都连接到 同一个 WebSocket 服务端，那么服务端可以充当消息中转站，实现多页面实时通信。

---

✅ 适用于：

• ∙实时聊天、协作编辑、多端同步等高级场景
• ∙需要服务端支持，实现成本较高

---

方法	是否同源限制	是否支持跨域	实时性	通信方式	适用场景	备注
**window.postMessage**​	❌ 不限制	✅ 支持	✅ 实时	主动发送消息	跨窗口、跨域、iframe 通信	最通用、推荐 ✅
**BroadcastChannel**​	✅ 同源	❌ 不支持	✅ 实时	广播式	同源多 Tab 实时通信	简洁高效 ✅
localStorage + storage 事件​	✅ 同源	❌ 不支持	⚠️ 延迟	通过存储变化触发	同源页面间轻量通信	简单但有限制
**SharedWorker**​	✅ 同源	❌ 不支持	✅ 实时	共享线程通信	复杂状态共享、多页协同	较复杂
**Service Worker**​	✅ 同源	❌ 不支持	✅ / ⚠️	消息中转	PWA、消息推送、高级场景	不常用
URL / Hash 传参​	✅ 同源	✅ 支持	❌ 非实时	页面跳转传参	页面间传参	非通信
Cookie​	✅ 同源	✅ 支持	⚠️ 延迟	轮询读取	极少用于通信	不推荐
WebSocket​	✅ / ❌ 可配置	✅ 支持	✅ 实时	服务端中转	实时多端同步、高级协作场景	需服务端

场景	推荐方案
跨 Tab / 跨窗口 同源通信，简单高效​	✅ BroadcastChannel
**跨域 / 跨窗口 通信（如 iframe、弹窗）**​	✅ window.postMessage（最推荐）
同源页面间轻量级通信​	✅ localStorage + storage 事件
复杂状态共享、多页协同​	✅ SharedWorker（较高级）
页面跳转传参​	✅ URL / Hash 参数
**实时多端同步（如聊天、协作）**​	✅ WebSocket + 服务端

---