[!info] related notes

• 跨域是什么，CORS 预检请求是什么
• COOP、COEP 与 CORP 跨源隔离
• 跨域

---

浏览器跨Tab页通信方案详解

作为前端开发者，我了解多种实现浏览器跨Tab页通信的技术方案，下面我将详细介绍几种主要方法及其适用场景：

1. Broadcast Channel API

Broadcast Channel API 是一种现代的跨Tab通信方案，它允许同源的不同Tab页通过命名频道进行通信。

实现方式：

// 创建或加入频道
const channel = new BroadcastChannel('my_channel');

// 发送消息
channel.postMessage({type: 'update', data: 'Hello from Tab 1'});

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

// 关闭连接
channel.close();

特点：

• 简单易用，基于发布-订阅模式
• 支持任意类型的数据对象
• 仅限于同源Tab页间通信
• 现代浏览器支持良好(IE除外)

2. LocalStorage事件机制

利用LocalStorage的storage事件可以实现简单的跨Tab通信。

实现方式：

// Tab 1 - 发送消息
localStorage.setItem('message', JSON.stringify({text: 'Hello from Tab 1'}));

// Tab 2 - 接收消息
window.addEventListener('storage', (event) => {
    if (event.key === 'message') {
        const data = JSON.parse(event.newValue);
        console.log('Received:', data.text);
    }
});

特点：

• 简单易实现
• 存储容量有限(通常5MB)
• 只能存储字符串，需要序列化/反序列化
• 仅限于同源Tab页

3. Service Worker

Service Worker可以作为消息中转站实现跨Tab通信。

实现方式：

// 注册Service Worker
navigator.serviceWorker.register('sw.js');

// 发送消息
navigator.serviceWorker.controller.postMessage({type: 'update', data: 'Hello'});

// 接收消息
navigator.serviceWorker.addEventListener('message', (event) => {
    console.log('Received:', event.data);
});

// Service Worker脚本 (sw.js)
self.addEventListener('message', (event) => {
    event.waitUntil(
        self.clients.matchAll().then((clients) => {
            clients.forEach(client => client.postMessage(event.data));
        })
    );
});

特点：

• 可实现后台同步通信
• 支持离线场景
• 实现相对复杂
• 需要HTTPS

4. SharedWorker

SharedWorker可以被多个Tab页共享，作为通信中介。

实现方式：

// 创建SharedWorker
const worker = new SharedWorker('worker.js');

// 发送消息
worker.port.postMessage('Hello from Tab 1');

// 接收消息
worker.port.onmessage = (event) => {
    console.log('Received:', event.data);
};

// worker.js
const connections = [];
onconnect = (e) => {
    const port = e.ports[0];
    connections.push(port);
    
    port.onmessage = (event) => {
        connections.forEach(conn => {
            if(conn !== port) conn.postMessage(event.data);
        });
    };
};

特点：

• 适合复杂应用场景
• 可实现状态共享
• 实现复杂度较高
• 需要对Web Workers有理解

5. window.postMessage

适用于不同源或iframe间的通信。

实现方式：

// 发送消息到特定窗口
targetWindow.postMessage('Hello', 'https://target-origin.com');

// 接收消息
window.addEventListener('message', (event) => {
    if(event.origin !== 'https://expected-origin.com') return;
    console.log('Received:', event.data);
});

特点：

• 支持跨源通信
• 需要精确控制目标窗口和origin
• 安全性要求高
• 适用于iframe通信

方案选择建议

1. 同源简单通信：优先考虑Broadcast Channel或LocalStorage
2. 复杂状态共享：考虑SharedWorker
3. 离线/后台场景：使用Service Worker
4. 跨源通信：使用window.postMessage
5. 兼容性要求高：LocalStorage最广泛支持