Web跨标签页通信应该怎么玩？

前言：Web跨标签页通信：原理、选型、安全与性能

Web 应用常需在多个标签页、窗口或 iframe 间同步数据和状态。如何选对通信方案，并兼顾安全与性能。同时请耐心阅读，本文总体上没有很复杂的代码，基本上一眼能看懂不难，只是需要有一些浏览器相关知识基础就行。看几张有意思的动图：

一、主流通信方案原理与选型

技术	通信方向	跨域	兼容性	数据容量	实时性	典型场景
BroadcastChannel	多对多	否	新浏览器	较大	高	同源状态、事件同步
localStorage+事件	一对多	否	极好	~5MB	中	登录状态、用户设置同步
SharedWorker	多对多	否	新浏览器	较大	高	协作编辑、全局缓存
window.postMessage	一对一	支持	极好	较大	高	跨域 iframe/窗口通信
WebSocket	多对多	支持	需服务端	很大	极高	实时协作、全局推送

选型建议

新项目优先 BroadcastChannel
兼容性优先 localStorage
必须跨域选 postMessage
复杂本地同步用 SharedWorker
多端/全局协同用 WebSocket

二、核心实现与代码

1. BroadcastChannel ------ 最优雅的同源通信

js 复制代码

const bc = new BroadcastChannel('cart');
bc.postMessage({ type: 'cart-add', item });
bc.onmessage = e => { if (e.data.type === 'cart-add') updateCart(e.data.item); };
window.addEventListener('beforeunload', () => bc.close());

优点：多对多、结构化数据、API简单
局限：仅同源，需现代浏览器

看一下兼容性，看去也还行吧现代浏览器都没啥问题

2. localStorage + storage 事件 ------ 兼容性之选

js 复制代码

// 登录页
localStorage.setItem('auth', JSON.stringify({ loggedIn: true }));
// 其他标签页
window.addEventListener('storage', e => {
  if(e.key === 'auth') handleAuth(JSON.parse(e.newValue));
});

优点：兼容性极好
局限：只能字符串，不能同页面监听（任意页面触发其他页面收到通知，这个要小心，特别是当你涉及到刷新这种操作的时候，本人这个吃过p0级bug！！！）

3. SharedWorker ------ 多标签共享全局内存

worker.js

js 复制代码

const ports = [];
onconnect = e => {
  const port = e.ports[0];
  ports.push(port);
  port.onmessage = msg => ports.forEach(p => p !== port && p.postMessage(msg.data));
};

页面

js 复制代码

const worker = new SharedWorker('worker.js');
worker.port.postMessage({ type: 'update', text: 'hello' });
worker.port.onmessage = e => updateEditor(e.data.text);

4. window.postMessage ------ 跨域通信利器

js 复制代码

// 父窗口
childWin.postMessage('hello', 'https://child.com');
// 子窗口
window.addEventListener('message', e => {
  if(e.origin === 'https://parent.com') processMsg(e.data);
});

优点：可跨域！！！
局限：安全问题，务必校验 origin，防止 XSS

5. WebSocket ------ 全局实时推送

适用于服务端参与的全局同步、跨设备协作。需搭建服务端。

三、安全与性能

1. 消息安全防护

消息来源与结构校验

js 复制代码

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://trusted.com') return;
  if (!event.data || typeof event.data.type !== 'string') return;
  handleAuth(event.data.token);
});

类型白名单

js 复制代码

const allowedTypes = ['cart-update', 'logout'];
bc.onmessage = (e) => {
  if (!e.data || !allowedTypes.includes(e.data.type)) return;
  processAction(e.data);
};

敏感信息加密/最小化同步

js 复制代码

// 只同步会话ID
bc.postMessage({ type: 'login', sessionId: 'abc123' });
// 必须传敏感信息时加密
const encrypted = encryptData({ userId: 10 }, secretKey);
bc.postMessage({ type: 'secure-data', payload: encrypted });

及时释放资源

js 复制代码

window.addEventListener('beforeunload', () => {
  bc.close();
  worker.port.close();
});

2. 性能优化方法

高频通信防抖/节流

js 复制代码

let debounceTimer;
function sendCartUpdate(data) {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    bc.postMessage({ type: 'cart-update', data });
  }, 80);
}

大数据分片传输

js 复制代码

function sendLargeData(data) {
  const chunkSize = 1024 * 512;
  for (let i = 0; i < data.length; i += chunkSize) {
    bc.postMessage({
      type: 'data-chunk',
      chunk: data.slice(i, i + chunkSize),
      index: i / chunkSize,
      total: Math.ceil(data.length / chunkSize),
    });
  }
}

心跳检测

js 复制代码

setInterval(() => {
  worker.port.postMessage({ type: 'heartbeat', time: Date.now() });
}, 30000);

worker.port.onmessage = (e) => {
  if (e.data.type === 'heartbeat') worker.port.postMessage({ type: 'pong', time: Date.now() });
};

四、案例

1. 购物车多标签同步（BroadcastChannel + 安全性能）

js 复制代码

const bc = new BroadcastChannel('cart');
let debounceTimer;

function addToCart(item) {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    bc.postMessage({ type: 'cart-update', item });
  }, 100);
}

bc.onmessage = (event) => {
  if (event.data.type === 'cart-update' && event.data.item) updateCart(event.data.item);
};
window.addEventListener('beforeunload', () => bc.close());

安全：类型校验、最小数据同步
性能：防抖处理

2. 登录状态同步（localStorage）

js 复制代码

localStorage.setItem('auth', JSON.stringify({ loggedIn: true }));

window.addEventListener('storage', (event) => {
  if (event.key === 'auth') handleAuth(JSON.parse(event.newValue));
});

安全：仅同步状态
性能：状态变更时触发

3. 多标签实时协作编辑（SharedWorker）

主体代码见上，配合类型校验、节流防抖、心跳检测。

五、总结

选型

新项目用 Broadcast，同域兼容 localStorage，跨域选 postMessage，协作用 Worker/Socket。

安全与性能

校验消息来源和结构，类型白名单
敏感信息加密/不直传
高频通信节流/防抖
大数据分片，心跳检测
资源及时释放