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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
提示不难做，那个三角号样式很难调兼容，死了好多脑细胞预览主窗口提示错位，保存本地测比较好。2011-04-04
这篇文章主要介绍了javascript数据结构中栈的应用之符号平衡问题,结合实例形式分析了javascript基于栈的形式实现对各种括号如<> {} [] ()等的匹配验证操作相关应用技巧,需要的朋友可以参考下2017-04-04
javascript使用substring实现的展开与收缩文字功能示例
这篇文章主要介绍了javascript使用substring实现的展开与收缩文字功能,涉及javascript元素遍历与属性设置相关操作技巧,需要的朋友可以参考下2019-06-06
在日常前端开发中,大屏项目是每个前端开发者必备技能,但是目前设备尺寸大小和分辨率都不相同,所以大屏适配成了一个头疼的问题,所以下面这篇文章主要给大家介绍了关于前端大屏适配的三种解决方案,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了JavaScript实现简单的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
在前端开发中，我们经常需要在不同的组件或类之间共享功能代码，Mixin提供了一种非常灵活的方式，可以让我们在不破坏继承关系的前提下，将功能代码复用到多个对象中，文章通过代码示例介绍mixin提升代码复用性的方法和好处,需要的朋友可以参考下2023-06-06
JavaScript数组中相同的元素进行分组(数据聚合)groupBy函数详解
今天在打算从js端时序数据库TSDB中,按相同的类型的数据排在一起,并且取同一时间段最新的数据,经过查询这种思想叫做数据聚合,就是返回的数据要根据一个属性来做计算,这篇文章主要介绍了JavaScript数组中相同的元素进行分组(数据聚合) groupBy函数,需要的朋友可以参考下2023-12-12
本文介绍了如何使用微信小程序技术制作个性化的婚礼邀请函,包括页面布局、交互设计和多媒体资源整合,详细阐述了从功能需求到页面设计、测试优化以及发布流程的全面开发步骤,通过本项目,可以提升创意设计和用户体验优化的能力,需要的朋友可以参考下2024-10-10
数组是JS最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮助咱们提高开发效率,这篇文章主要给大家分享介绍了关于JavaScript数字数组的13个实用小技巧,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了微信小程序图片左右摆动效果详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
最新评论