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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
响应式导航条就是可以在不同的设备下查看不同的效果。这篇文章主要介绍了BootStrap响应式导航条实例介绍的相关资料，小编认为本文介绍的非常的不错，特此分享给大家，供大家参考2016-05-05
下面的js代码不管if条件的结果是true还是false都会执行大括号的代码，结果发现if条件括号后面多写了分号，崩溃啊2013-11-11
下面小编就为大家带来一篇js实现密码强度检测【附示例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-03-03
严格模式：由ECMA-262规范定义的JavaScript标准，对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下2017-09-09
详解Html a标签中href和onclick用法、区别、优先级别
本文主要分享一篇关于Html A标签中href和onclick用法、区别、优先级别,具有很好的参考价值,有需要了解的朋友可以看看2017-01-01
最近发现JS当中toFixed()方法存在一些问题,所以这里给大家总结下,这篇文章主要给大家介绍了关于JS中toFixed(2)精度问题的原因以及解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了eslint 的三大通用规则详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
本文主要介绍了js实现仿购物车+ -效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
本文主要介绍了js的offsetleft属性的用法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
在前端开发中,我们经常需要对数组进行随机排序,例如在游戏、抽奖、数据随机展示等场景中,JavaScript 提供了多种方式来实现数组的随机排序,本文将详细介绍不同的方法,并分析它们的优缺点,帮助开发者在不同场景下选择合适的解决方案,需要的朋友可以参考下2025-03-03
最新评论