前端使用 Broadcast Channel API 实现跨浏览器标签页通信

以下是使用 Broadcast Channel API 实现跨浏览器标签页通信的具体前端代码示例：

一、基础使用 Demo

html 
<!DOCTYPE html>
<html>
<body>
  <h2>标签页通信 Demo（Broadcast Channel）</h2>
  <button onclick="sendMessage()">发送消息</button>
  <div id="messages"></div>

  <script>
    // 1. 创建 Broadcast Channel（通道名称需一致）
    const channel = new BroadcastChannel('my_channel');

    // 2. 接收消息的监听器
    channel.onmessage = (event) => {
    
    
      const msg = `[接收][${
      
      new Date().toLocaleTimeString()}] ${
      
      event.data}`;
      document.getElementById('messages').innerHTML += msg + '<br>';
    };

    // 3. 发送消息
    function sendMessage() {
    
    
      const text = `消息来自标签页 ${
      
      Math.random().toString(36).substr(2, 5)}`;
      channel.postMessage(text);
      
      // 本地也显示发送的消息（可选）
      const msg = `[发送][${
      
      new Date().toLocaleTimeString()}] ${
      
      text}`;
      document.getElementById('messages').innerHTML += msg + '<br>';
    }

    // 4. 关闭通道（页面卸载时）
    window.addEventListener('beforeunload', () => {
    
    
      channel.close();
    });
  </script>
</body>
</html>

二、进阶用法（带消息类型）

javascript 
// 创建通道
const channel = new BroadcastChannel('my_channel');

// 发送结构化消息
channel.postMessage({
    
    
  type: 'SYNC_DATA',  // 消息类型
  payload: {
    
              // 消息内容
    userId: 123,
    status: 'active'
  }
});

// 接收消息（带类型判断）
channel.onmessage = (event) => {
    
    
  const {
    
     type, payload } = event.data;
  switch (type) {
    
    
    case 'SYNC_DATA':
      console.log('同步数据:', payload);
      break;
    case 'NOTIFICATION':
      alert(payload.text);
      break;
  }
};

四、关键特性说明
特性说明
同源限制只能在相同协议、域名、端口的页面间通信
通道名称所有通信页面需要使用相同的通道名称 (new BroadcastChannel(‘name’))
消息类型支持发送字符串/对象/ArrayBuffer 等结构化数据
性能比 localStorage 事件更高效，无存储开销
生命周期需要手动关闭 (channel.close()) 避免内存泄漏
五、浏览器兼容性

✅ Chrome 54+

✅ Firefox 76+

✅ Edge 79+

✅ Safari 15.4+

❌ IE 不支持

六、适用场景
多标签页状态同步（如登录状态）

跨标签页通知（如后台任务完成）

多窗口数据共享

避免重复操作（如只允许一个标签页播放音乐）

七、替代方案对比
方案优点缺点
Broadcast Channel 专用API、高效兼容性要求较高
localStorage 事件兼容性好需要处理存储、仅字符串
SharedWorker 复杂场景适用实现复杂度高
根据需求选择最合适的方案！

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！

猜你喜欢

目录

热门文章