前端Wiki/词条/Broadcast Channel 跨页通信

Broadcast Channel 跨页通信

定义让同源的多个标签页、窗口甚至 Worker 之间互相广播消息

跨标签页通信曾靠 localStorage 的 storage 事件这种 hack。Broadcast Channel 是官方方案：各页面 new BroadcastChannel(频道名)，postMessage 广播，onmessage 收消息。同源的同名频道自动连通，消息发给除发送者外的所有监听者。

典型场景：在一个标签页登录后其他标签页同步登录态、数据在另一页修改后各页刷新展示、退出登录时一键关掉所有标签。它只覆盖同源页面与 Worker；跨域或跨设备同步还得走 WebSocket 或 SharedWorker。页面关闭前 close() 释放频道。

同名频道同源自动连通，postMessage 广播给所有监听者
发送者收不到自己的消息，天然避免回环
页面不再监听时要 close 释放频道资源

JavaScript

var ch = new BroadcastChannel('user-login');

// 页面 A：登录成功后广播
function onLogin(name) {
  localStorage.setItem('user', name);
  ch.postMessage({ type: 'login', user: name });
}

// 页面 B 及其他标签页：监听同步
ch.onmessage = function (e) {
  if (e.data.type === 'login') {
    console.log('其他页面登录了:', e.data.user);
    location.reload(); // 同步刷新登录态
  }
};

window.addEventListener('beforeunload', function () { ch.close(); });

⚠ 常见误区

期待BroadcastChannel 能跨域通信——它只限同源页面
想收到自己发出的消息——规范上发送者被排除
频道用完不 close，页面关闭后监听才回收

🔗 相关词条本地存储会话存储