如何实现多标签页（跨 Tab）之间的通信？
实现多标签页（Cross-Tab）通信是前端开发中常见的需求，主要用于在同一个浏览器下的不同 Tab 之间同步状态（如：在一个 Tab 退出登录，其他 Tab 也应自动跳转；或者同步购物车数据）。
前提条件：这些标签页必须属于同源（Same Origin），即协议、域名、端口必须一致。
以下是几种主流的实现方案，按推荐程度排序：
1. Broadcast Channel API（推荐方案）
这是专门为跨标签页通信设计的 API，使用最简单，语义最清晰。它就像是一个广播频道，所有订阅了该频道的 Tab 都能收到消息。
- 优点：API 简单，专门用于此场景，性能好。
- 缺点：兼容性较好，但不支持 IE 和极老版本的浏览器。
代码示例：
javascript
// 创建一个频道（所有 Tab 使用相同的频道名称）
const channel = new BroadcastChannel('app_channel');
// 1. 发送消息 (在 Tab A 中)
function sendMessage() {
channel.postMessage({
type: 'UPDATE_THEME',
payload: 'dark'
});
}
// 2. 接收消息 (在 Tab B 中)
channel.onmessage = (event) => {
const { type, payload } = event.data;
console.log(`收到消息: ${type}, 内容: ${payload}`);
if (type === 'UPDATE_THEME') {
// 执行换肤逻辑
}
};
// 3. 关闭频道 (组件销毁时)
// channel.close();2. LocalStorage + storage 事件（兼容性最好）
利用 localStorage 的特性：当 LocalStorage 发生变化时，其他（非当前）Tab 会触发 storage 事件。
- 优点：兼容性极好（支持 IE8+），API 简单。
- 缺点：数据负载有限（字符串），需要手动序列化/反序列化 JSON；会频繁读写磁盘（虽然现代浏览器有缓存优化）。
代码示例：
javascript
// 1. 发送消息 (在 Tab A 中)
// 注意：setItem 的值必须发生变化才会触发事件，通常加个时间戳
function sendMessage() {
const data = {
type: 'LOGOUT',
timestamp: Date.now() // 确保每次都触发
};
localStorage.setItem('app_msg', JSON.stringify(data));
}
// 2. 接收消息 (在 Tab B 中)
window.addEventListener('storage', (event) => {
if (event.key === 'app_msg' && event.newValue) {
const data = JSON.parse(event.newValue);
console.log('收到同步消息:', data);
if (data.type === 'LOGOUT') {
// 执行登出逻辑
}
}
});3. Shared Worker（适用于复杂状态共享）
Shared Worker 是 Web Worker 的一种，它可以被多个 Tab 共享同一个后台线程。
- 优点：可以维护一份共享的内存状态，逻辑在 Worker 线程处理，不阻塞 UI。
- 缺点：调试稍微麻烦一点，API 相对复杂，不支持 IE。
代码示例：
worker.js (独立文件):
javascript
// 保存所有连接的端口
const ports = [];
self.onconnect = (e) => {
const port = e.ports[0];
ports.push(port);
port.onmessage = (event) => {
// 收到某个 Tab 的消息，广播给所有其他 Tab
const data = event.data;
ports.forEach(p => {
if (p !== port) { // 可选：不发回给自己
p.postMessage(data);
}
});
};
port.start();
};main.js (在页面中):
javascript
const worker = new SharedWorker('worker.js');
// 1. 启动端口
worker.port.start();
// 2. 接收消息
worker.port.onmessage = (event) => {
console.log('收到 SharedWorker 广播:', event.data);
};
// 3. 发送消息
function sendMessage() {
worker.port.postMessage({ msg: 'Hello World' });
}4. Service Worker
如果你的应用是 PWA 或者已经使用了 Service Worker，可以利用它来管理所有客户端（Clients）。
- 原理：Tab A 发送消息给 Service Worker -> Service Worker 遍历所有 Clients -> 转发消息给其他 Tab。
- 优点：可以控制页面生命周期，后台能力强。
- 缺点：配置繁琐，主要用于缓存和离线场景，仅为了通信引入 SW 有点大材小用。
简述流程：
- 页面
navigator.serviceWorker.controller.postMessage()发送数据。 - SW 中监听
message事件。 - SW 中使用
self.clients.matchAll()获取所有窗口，循环调用client.postMessage()。
5. Window.postMessage (仅限父子/窗口引用关系)
如果 Tab B 是由 Tab A 通过 window.open() 打开的，或者一个是另一个的 iframe，它们持有对方的 window 引用。
- 场景：OAuth 登录弹窗、后台管理系统打开详情页。
- 代码：
- Tab A:
const child = window.open(...)->child.postMessage(...) - Tab B:
window.opener.postMessage(...)
- Tab A:
6. WebSocket / Server-Sent Events (服务端中转)
这不是纯前端方案，而是通过服务器中转。
- 原理：Tab A -> 发送 WebSocket 消息 -> 服务器 -> 推送给 Tab B。
- 优点：数据绝对实时，不仅能跨 Tab，还能跨设备、跨浏览器。
- 缺点：增加了服务器压力和网络延迟。如果只是为了简单的 UI 同步（如夜间模式切换），此方案过于“重”了。
总结与建议
| 方案 | 复杂度 | 兼容性 | 推荐场景 |
|---|---|---|---|
| Broadcast Channel | 低 | 现代浏览器 | 首选。通用状态同步、简单的消息通知。 |
| LocalStorage | 低 | 极好 (IE8+) | 备选。需要兼容老旧浏览器时使用。 |
| Shared Worker | 高 | 较好 | 需要多 Tab 共享复杂计算逻辑或维护庞大共享数据时。 |
| WebSocket | 高 | 极好 | 需要多端同步（手机和电脑同时更新）或实时性要求极高的业务数据。 |
最佳实践建议：
通常建议封装一个工具类，优先使用 BroadcastChannel，如果浏览器不支持，则自动降级使用 LocalStorage。
右滑查看面试常问