浏览器多窗口通信技术

## 举个例子就是，假如一个浏览器打开了多个相同的窗口，其中某个窗口调用了编辑接口，数据更新了，其他的窗口数据怎么自动更新，不能手动刷新页面

• 同域：协议、域名、端口完全一致（如 http://localhost:8080 的两个标签页），大部分原生 API 可直接通信；
• 跨域：三者任一不同（如 http://a.com 和 http://b.com），仅少数 API 支持（需显式授权）

同域多窗口通信

1.LocalStorage 监听（最常用）

原理：

• 同域下，所有窗口共享 LocalStorage/SessionStorage 数据；
• 当 A 窗口修改存储数据时，浏览器会在其他同域窗口触发 storage 事件（当前修改窗口不触发），监听该事件即可获取数据

// 窗口A（编辑数据或其他更新操作后）
localStorage.setItem('dataUpdated', JSON.stringify({
  type: 'message',
  content: 'Hello 窗口B'
}));

// 窗口B（监听变化）
window.addEventListener('storage', (e) => {
    if (e.key === 'dataUpdated') {
        const data = JSON.parse(e.newValue);
        console.log('收到消息：', data.content); // 输出：Hello 窗口B
        // 重新获取数据
        refresh();
    }
});

2. BroadcastChannel API（广播频道）

原理：

• 多个同域窗口创建「同名广播频道」（如 new BroadcastChannel('my-channel')）；
• 任意窗口通过频道发送消息，所有订阅该频道的窗口都会收到（包括发送方自身）；
• 频道支持主动关闭，避免内存泄漏

// 窗口A
const channel = new BroadcastChannel('data-update');
channel.postMessage({ type: 'dataUpdated' });

//接收方 窗口B
const channel = new BroadcastChannel('data-update');
channel.onmessage = (e) => {
    if (e.data.type === 'dataUpdated') {
        refresh();
    }
};

3.SharedWorker

原理：

• 浏览器为同源的多窗口创建唯一的 Worker 进程，通过 MessagePort 进行通信

// worker.js - 广播给所有窗口
const ports = [];

self.addEventListener('connect', (e) => {
  const port = e.ports[0];
  ports.push(port);
  
  port.onmessage = (msg) => {
    // 广播给所有窗口（包括自己）
    ports.forEach(p => p.postMessage(msg.data));
  };
  
  port.start();
});

// 页面
const worker = new SharedWorker('worker.js');
worker.port.start();
worker.port.onmessage = (e) => console.log('收到:', e.data);
worker.port.postMessage('hello');

方案选择：

需要跨窗口通信？
 │
 ├─ 1. 是否需要共享持续的连接或状态？
 │    ├─ 是 → **SharedWorker** (最强大，适合复杂场景)
 │    └─ 否 → 继续判断
 │
 ├─ 2. 是否需要支持老旧的 IE 浏览器？
 │    ├─ 是 → **localStorage + storage 事件** (兼容性最佳)
 │    └─ 否 → 继续判断
 │
 └─ 3. 只是简单、快速的页面间消息广播？
      ├─ 是 → **BroadcastChannel** (API 最简洁)
      └─ 否 → 考虑 `window.postMessage` (用于与 iframe/弹窗等特定窗口通信)