J*aScript消息通道_BroadcastChannelAPI_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript消息通道_BroadcastChannelAPI

2025-11-28

浏览次数：次

返回列表

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

javascript消息通道_broadcastchannelapi

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在线订阅功能、网站统计、邮件列表、邮件群发、数据库管理、站内短消