Broadcast Channel API 可实现同源页面间通信，通过创建指定名称的频道实例收发消息，支持结构化数据传输，需注意同源策略、统一消息格式、及时关闭频道及错误处理。
Broadcast Channel API 是浏览器提供的一种简单机制，用于在同源的不同浏览器窗口、标签页或 iframe 之间进行实时通信。只要页面的协议、域名和端口相同，就可以通过它发送消息。
创建和使用 BroadcastChannel 实例
要使用该 API，先用一个指定的频道名称创建 BroadcastChannel 对象。所有同源下使用相同名称的频道可以互相收发消息。
示例：
在两个不同的标签页中运行以下代码，它们就能互相通信。
打开频道并监听消息：
const channel = new BroadcastChannel(‘my-channel’);
channel.onmessage = function(event) {
console.log(‘收到消息:’, event.data);
};
发送消息：
channel.postMessage(‘你好，其他窗口！’);
处理消息类型和数据格式
postMessage 支持发送结构化数据，如字符串、对象、数组等，内部使用结构化克隆算法序列化数据。
常见做法是统一消息格式，便于识别和处理：
{ type: ‘USER_LOGIN’, data: { userId: 123 } } { type: ‘SYNC_PREFERENCES’, theme: ‘dark’ }
接收方根据 type 字段判断消息用途，执行相应逻辑。
注意资源清理与错误处理
长时间运行的页面应避免内存泄漏，建议在不需要时关闭频道。
关闭频道：
channel.close(); // 停止接收和发送
可在页面卸载前调用：
window.addEventListener(‘beforeunload’, () => {
channel.close();
});
同时监听 error 事件，及时发现异常：
channel.onerror = (err) => {
console.error(‘广播通道出错:’, err);
};
基本上就这些。Broadcast Channel API 简单直接，适合轻量级跨标签通信，比如状态同步、用户行为通知等场景。不复杂但容易忽略的是确保同源策略和正确关闭资源。
以上就是如何利用 Broadcast Channel API 实现同源下不同浏览器窗口间的通信？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1523634.html
微信扫一扫 
支付宝扫一扫 
