JavaScript消息通道_BroadcastChannelAPI

BroadcastChannel API 可实现同源页面间高效通信，通过创建相同名称的频道实例并使用 postMessage 发送消息，addEventListener 或 onmessage 接收消息，需在 beforeunload 时调用 close 释放资源，适用于登录状态同步、主题切换等场景。

BroadcastChannel API 是浏览器提供的原生跨页面通信方案，只要页面同源（协议、域名、端口相同），就能通过广播机制交换数据。它比用 localStorage 监听 storage 事件更高效，也比 postMessage 不需要持有窗口引用，适合做多标签页之间的状态同步。

创建频道并收发消息

使用 BroadcastChannel 的第一步是创建一个指定名称的频道实例，所有想通信的页面都必须使用相同的频道名。

• 创建频道：const channel = new BroadcastChannel('chat-room');，这里的 'chat-room' 就是频道标识。
• 发送消息：调用 postMessage() 方法，可以传字符串、对象、数组等任何能被结构化克隆的数据。
  channel.postMessage({ type: 'NEW_MESSAGE', text: 'Hello!' });
• 接收消息：通过监听 message 事件来获取其他页面发来的信息。
  channel.addEventListener('message', (event) => { console.log(event.data); });
  也可以用 onmessage 属性赋值的方式：
  channel.onmessage = (event) => { /* 处理逻辑 */ };

处理消息来源与资源释放

在接收到消息时，可以通过 event.source 属性判断消息是从哪个浏览上下文发出的，比如是来自另一个 Window 还是 SharedWorker，这在复杂场景下有助于区分消息来源。

当某个页面或组件不再需要监听广播时，应当主动关闭频道以释放系统资源，避免内存泄漏。

科汛网上商城管理系统

一个经过完善设计有着及其强大的会员互动和独特创新的内容管理系统。主要功能模块包括：文章频道、图片频道、下载频道、动漫频道、音乐频道、影视频道、商城频道、供求频道、采集管理 、专题频道等等。系统通用模块：用户管理、博客日志管理、相册管理、音乐盒管理、朋友圈管理、广告管理、公告管理、模板管理、网站信息配置、高级自定义SQL扩展标签，RSS在线订阅功能、网站统计、邮件列表、邮件群发、数据库管理、站内短消

0

查看详情

立即学习“Java免费学习笔记（深入）”；

• 关闭频道：channel.close();
• 最佳实践是在页面卸载前调用 close，例如：
  window.addEventListener('beforeunload', () => { channel.close(); });

典型应用场景

BroadcastChannel 特别适合那些需要在多个标签页间保持状态一致的功能。

• 用户登录状态同步：在一个标签页登录后，通知其他所有标签页更新 UI，无需刷新。
• 主题切换联动：用户在 A 标签页切换了深色模式，B 标签页立即响应并改变主题。
• 共享数据缓存失效：当一个页面修改了关键配置，通过广播通知其他页面清空本地缓存。
• 简易协作提示：如多标签页编辑同一内容时，提示“其他窗口正在操作”。

以上就是JavaScript消息通道_BroadcastChannelAPI的详细内容，更多请关注php中文网其它相关文章！