JavaScript使用Broadcast Channel实现前端跨标签页通信

作者：代码拾荒时间：2026-10-31 13:14:17浏览：650

本文介绍如何使用HTML5提供的Broadcast Channel API在浏览器不同标签页间进行通信。通过创建Channel实例，利用postMessage发送消息并监听message事件接收数据，实现标签页间的数据共享与交互。文章同时对比了localStorage、postMessage及SharedWorker等其他跨标签页通信方案，为Web应用开发提供灵活的技术选型参考。

在Web应用开发场景中，经常需要在不同的浏览器标签页之间建立通信机制。例如，一个标签页中的状态变更需要同步到另一个标签页，或者当用户在当前标签页执行特定操作时，需向其他打开的标签页发送通知。针对此类跨标签页通信需求，可以利用HTML5规范中提供的Broadcast Channel API来实现。

实现步骤

首先，准备两个文件：一个HTML文件和对应的JavaScript文件。

HTML文件结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./crossTabMsg.js"></script>
</head>
<body>
    <button id="btn">发送消息</button>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            sendMsg('test', 'hello');
        }
        listenMsg(function(msg) {
            console.log(msg);
        })
    </script>
</body>
</html>

JavaScript文件（crossTabMsg.js）内容如下：

const channel = new BroadcastChannel('cross-tab-msg');

function sendMsg(type, msg) {
    channel.postMessage({type, msg});
}

function listenMsg(callback) {
    channel.addEventListener('message', e => {
        callback && callback(e.data);
    });
}

在HTML文件中定义了一个按钮，并绑定了点击事件处理函数。当用户点击该按钮时，调用sendMsg函数发送一条消息。同时，页面加载时会调用listenMsg函数来监听来自其他标签页的消息，并将接收到的消息打印到控制台。

在JavaScript文件中，实例化了一个名为cross-tab-msg的Broadcast Channel对象，并定义了两个核心函数：sendMsg用于向外发送消息，listenMsg用于监听接收到的消息。当Channel收到消息时，listenMsg函数会触发注册的回调函数，并将接收到的消息数据作为参数传递给该回调函数。

使用方法

要在不同标签页间实现通信，只需确保这些标签页加载相同的HTML和JavaScript文件即可。当在一个标签页中点击按钮发送消息时，其他标签页中的消息监听器会接收到该消息，并执行相应的处理逻辑。

结论

借助Broadcast Channel API，可以便捷地实现跨标签页通信，使不同标签页之间能够高效地进行消息传递和数据共享。这为构建功能更复杂的Web应用程序提供了更多的技术可能性和灵活性。

方法补充

除了上述Broadcast Channel方案外，还整理了其他几种JavaScript实现跨标签页通信的方法，供开发者参考选择。

1. localStorage

<!-- 1.html -->
<script>
  if(!localStorage.getItem('a')){
		localStorage.setItem('a',1)
	}else{
		var sum = localStorage.getItem('a')
		localStorage.setItem('a', +sum + 1)
	}
</script>

<!-- 2.html  -->
<script>
  window.addEventListener('storage', (e) => console.log(e))
</script>

sessionStorage.setItem('message', '我是sessionStorage的值');
// 触发自定义事件来通知其他标签页
var event = new Event('sessionStorageUpdated');
window.dispatchEvent(event);
 
window.addEventListener('storage', function(event) {
  if (event.key === 'message') {
    var message = sessionStorage.getItem('message');
    console.log('message:', message);
  }
});
 
// 监听自定义事件来检测 `sessionStorage` 的更新
window.addEventListener('sessionStorageUpdated', function() {
  var message = sessionStorage.getItem('message');
  console.log('message:', message);
});

2. postMessage

<!-- 1.html -->
<body>
    <button class="pop">弹出新窗口</button>
    <button class="button">发送数据</button>
    <script>
      const pop = document.querySelector('.pop');
      const button = document.querySelector('.button');

      let index = 0;
      let opener = null;

      pop.addEventListener('click', () => {
        opener = window.open(
          '2.html',
          '123',
          'height=600,width=600,top=20,resizeable=yes'
        );
      });

      button.addEventListener('click', () => {
        const data = {
          value: `moment ${index++}`,
        };

        opener.postMessage(data, '*');
      });
    </script>
  </body>

  <!-- 2.html -->
  <body>
  <div>postMessage  2.html</div>
  <script>
    window.addEventListener("message", (e) => {
      console.log(e.data);
    });
  </script>
</body>

3. SharedWorker

<!-- a.html -->
<script>
  let index = 0;
  const worker = new SharedWorker("worker.js");

  setInterval(() => {
    worker.port.postMessage(`moment ${index++}`);
  }, 1000);
</script>

<!-- b.html -->
<script>
  const worker = new SharedWorker("worker.js");

  worker.port.start();
  setInterval(() => {
    worker.port.postMessage("php是世界上最好的语言");
  }, 1000);

  worker.port.onmessage = function (e) {
    if (e.data) {
      console.log(e.data);
    }
  };
</script>

创建一个 worker.js 文件,并编写以下代码：

let data = "";

self.onconnect = (e) => {
  const port = e.ports[0];

  port.onmessage = function (e) {
    if (e.data === "php是世界上最好的语言") {
      port.postMessage(data);
      data = "";
    } else {
      data = e.data;
    }
  };
};

到此这篇关于JavaScript使用Broadcast Channel实现前端跨标签页通信的文章就介绍到这了,更多相关JavaScript Broadcast Channel跨标签页通信内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JavaScript异步发送HTTP请求时怎么优雅地处理错误

2026-11-05 17:10:44

5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选

2026-11-05 17:04:04

JavaScript入门书籍避坑：这些书不适合初学者

2026-11-05 16:31:15

JS使用Math.round实现保留两位小数的原理与代码

2026-11-05 15:35:55

JavaScript 原生 Date 对象怎么实现日期加减

2026-11-05 14:30:00