JS实现前端多标签页通信BroadcastChannel

更新时间：2025年10月21日 10:01:35 作者：CC码码

BroadcastChannel 是一种用于同源不同窗口/标签页间通信的 API,可解决多标签页状态同步问题,通过创建频道并监听消息,可实现登录状态、页面设置、业务数据等实时同步,下面就来详细的介绍一下,感兴趣的可以了解一下

背景

日常使用一些网站过程中，会发现当打开一个网站多个标签页时，当在其中一个标签页页面退出登录时，在其他标签页中还可以继续操作，这里就存在一个状态没有实时统一的问题；其后当操作发送请求时根据后端的登录校验情况会跳转到登录页，而这个操作滞后了。比如常用的 AI 网站 DeepSeek。

那如何在多标签页下进行状态的同步呢，这时候就要请出今天的“主人公”- BroadcastChannel。

来浅浅实践一下

使用起来很简单。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BroadcastChannel</title>
</head>
<body>
  <h1>BroadcastChannel</h1>
  <script>
    const channel = new BroadcastChannel('my-channel');
    channel.postMessage('hello world');

    channel.onmessage = (event) => {
      console.log(event.data);
    }
  </script>
</body>
</html>

效果

在两个浏览器窗口中分别打开页面，当一个页面刷新后发送消息时，之前打开的相同页面收到了消息内容，但是当前页面没有收到消息内容。

注意

适用于同源的不同浏览器窗口、浏览器标签页、iframe之间互相通信
通过 message 事件进行广播
在监听该 channel 的所有 BroadcastChannel 对象上触发，但是不包含发送消息的对象

应用

举两个业务中会用到的例子：

同步登录状态

当多个页面处于未登录状态时，在其中一个页面上登录成功后，所有的页面都会收到消息，更新登录状态及页面路由。

// 登录状态管理
const authChannel = new BroadcastChannel('auth');

// 登录成功后
function handleLogin(user) {
  localStorage.setItem('token', user.token);
  authChannel.postMessage({
    type: 'LOGIN_SUCCESS',
    user: user
  });
}

// 监听登录状态
authChannel.onmessage = (event) => {
  switch (event.data.type) {
    case 'LOGIN_SUCCESS':
      updateUserInfo(event.data.user);
      break;
    case 'LOGOUT':
      clearUserData();
      redirectToLogin();
      break;
  }
};

同步页面设置

在多个 AI 对话页面场景下，在其中一个页面上个更改了 LLM 对话参数 Temperature 时，其余页面中相应参数也会更改，避免后知后觉**。**

// 应用配置同步
const configChannel = new BroadcastChannel('app-config');

// 管理员更新配置
function updateAppSettings(settings) {
  configChannel.postMessage({
    type: 'SETTINGS_UPDATED',
    settings: settings
  });
}

// 所有页面应用新配置
configChannel.onmessage = (event) => {
  if (event.data.type === 'SETTINGS_UPDATED') {
    applyNewSettings(event.data.settings);
    showNotification('配置已更新');
  }
};

同步业务数据

在多个页面对比商品时，在其中一个页面中加购商品后其余页面也会更新购物车列表，保证数据的一致性。

// 购物车同步
const cartChannel = new BroadcastChannel('cart');

// 添加商品时通知其他标签页
function addToCart(product) {
  const cart = getCartFromStorage();
  cart.push(product);
  localStorage.setItem('cart', JSON.stringify(cart));
  
  cartChannel.postMessage({
    type: 'CART_UPDATE',
    cart: cart
  });
}

// 监听购物车变化
cartChannel.onmessage = (event) => {
  if (event.data.type === 'CART_UPDATE') {
    updateCartUI(event.data.cart);
  }
};

对比其他方案


通信方式	适用场景	特点
BroadcastChannel	同源标签页通信	简单易用，不支持跨域
LocalStorage 事件	简单数据同步	兼容性好，数据大小限制
SharedWorker	复杂数据共享	功能强大，实现复杂
Window.postMessage	跨域通信	需要引用目标窗口

总结

BroadcastChannel 非常适用于同源页面在多窗口、多标签页场景下的数据或状态同步，做到保持相同页面在同一时刻下数据的一致性。

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

您可能感兴趣的文章:

JavaScript实现拖拽网页内元素的方法
这篇文章主要介绍了JavaScript实现拖拽网页内元素的方法,以注释形式较为详细的分析了javascript事件监听、元素定位的相关技巧,并配有详细的注释以便于理解,需要的朋友可以参考下
2015-04-04
微信小程序通过js实现瀑布流布局详解
这篇文章主要介绍了微信小程序通过js实现瀑布流布局详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
BootStrap table使用方法分析
这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法，具有一定的实用性和参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
这篇文章通过php+jquery+ajax+mysql相结合，实现当用户浏览网站文章或者是论坛帖子后，想表达自己浏览后的心情，发表自己的感受，很多网站都提供了用户发表心情的功能，通过此功能可以很直观的分析文章或者是论坛对浏览者的用户体验度
2015-08-08
JavaScript Event学习补遗 addEventSimple
这里有个addEventSimple和removeEventSimple函数，有时候需要不那么显眼的事件处理程序的时候我就用这两个函数注册。
2010-02-02
window.print打印指定div实例代码
window.print可以打印网页，但有时候我们只希望打印特定控件或内容，怎么办呢，请看下面的例子
2013-12-12
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
这篇文章主要介绍了面向对象JS基础讲解，工厂模式、构造函数模式、原型模式、混合模式、动态原型模式,需要的朋友可以参考下
2014-08-08
JavaScript获取URL中参数值的四种方法
在前端开发中,处理URL参数是一个常见的任务,尤其是在没有框架支持的情况下,这篇文章主要介绍了JavaScript获取URL中参数值的四种方法,需要的朋友可以参考下
2025-04-04
微信小程序开发问题之wx.previewImage
这篇文章主要给大家介绍了关于微信小程序开发问题之wx.previewImage的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
javascript图片预加载完整实例
这篇文章主要介绍了javascript图片预加载实现方法,以完整实例形式分析了JavaScript图片预加载显示的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-12-12