Broadcast Channel API 是浏览器提供的同一源下跨标签页通信方案，通过创建同名频道实例实现消息收发，支持 postMessage 发送和 onmessage 监听，适用于状态同步与操作通知，需注意仅限同源、数据可序列化、不保证消息顺序，且应调用 close() 释放资源。
Broadcast Channel API 是浏览器提供的一种轻量级跨标签页通信方式，允许同一源下的不同页面实例之间发送和接收消息。它使用简单，不需要依赖服务器或复杂的存储机制，适合实现页面间的状态同步、用户操作通知等场景。
创建和使用 BroadcastChannel
要使用 Broadcast Channel API，首先需要创建一个 BroadcastChannel 实例，传入一个通道名称（字符串），所有使用相同名称的频道可以互相通信。
示例代码：
const channel = new BroadcastChannel(‘my-channel’);
// 发送消息
channel.postMessage(‘Hello from tab 1!’);
// 接收消息
channel.onmessage = function(event) {
console.log(‘收到消息:’, event.data);
};
只要多个标签页都连接到名为 ‘my-channel’ 的频道，它们就能互相收发消息。
在实际页面中实现通信
假设你有两个页面（或同一个页面打开多个标签），可以通过以下方式实现双向通信：
每个页面都创建同名的 BroadcastChannel 实例 绑定 onmessage 事件来监听消息 调用 postMessage 发送数据
完整示例：
// page.js
const bc = new BroadcastChannel(‘chat’);
bc.onmessage = (event) => {
const msg = document.createElement(‘div’);
msg.textContent = ‘来自其他标签: ‘ + event.data;
document.body.appendChild(msg);
};
// 点击按钮发送消息
document.getElementById(‘send’).onclick = () => {
bc.postMessage(‘我点击了按钮！’);
};
在另一个标签页中运行相同代码，即可看到消息互通。
注意事项和兼容性
Broadcast Channel 虽然简单易用，但需要注意以下几点：
只能在同一 origin（协议+域名+端口）下工作 消息只支持可序列化的数据类型（如字符串、JSON、ArrayBuffer 等） 不保证消息顺序和送达（适用于非关键通知） IE 不支持，现代浏览器基本都已支持（可查 Can I Use） 记得在不需要时调用 channel.close() 释放资源
基本上就这些。对于简单的标签页通信需求，Broadcast Channel API 是最直接的选择，无需引入额外依赖。
以上就是如何用Broadcast Channel API实现标签页通信？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529541.html
微信扫一扫 
支付宝扫一扫 
