它允许同源的不同浏览器窗口,Tab 页,frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件,消息可以广播到所有监听了该频道的 BroadcastChannel 对象。 BroadcastChannel,就字面意思来言,叫做“广播频道”,官方文档说,该API是用于同源不同页面之间完成通信的功能 一、与postMessage区别: 它与postMess...
可以使用 BroadcastChannel.postMessage() 发送一条任意 Object 类型的消息,给所有同源下监听了该频道的所有浏览器上下文。消息以 message 事件的形式发送给每一个绑定到该频道的广播频道。 channel.postMessage(message: any); 接受消息 通过监听 message 事件即可接收到同频道发送的任意消息。 channel.addEventListener(...
跨标签页通信神器:深入了解 BroadcastChannel 的妙用 最近在做项目遇到一个场景:在项目打开时候连接一个 websocket,在初始化、收到推送消息等场景下,其他页面需要同步进行一些操作,所以需要建立消息广播通知给需要的页面。下面是我想到的一些实现方案。 方案对比 方案实现思路推荐指数优点缺点 Pinia (Vue 项目) 使用Vue ...
创建通道:在一个标签页中,通过new BroadcastChannel(channelName)创建一个新的BroadcastChannel对象,其中channelName是通道的名称,用于标识通信的通道。 发送消息:通过调用BroadcastChannel对象的postMessage(message)方法向该通道发送消息,其中message是要发送的消息数据。该消息将被广播给所有订阅了该通道的标签页。 监听消息:...
constbc =newBroadcastChannel('test_channel'); test_channel 参数用来指定channel的名称,用以标识这个 channel,在其他页面,可以通过传入相同的 name 来使用同一个广播频道,连接到相同名称的BroadcastChannel,可以监听到这个channel分发的消息。用 MDN 上的话来解释就是: ...
BroadcastChannel allows scripts from the same origin but other browsing contexts (windows, workers) to send each other messages. IE 5.5 - 10: Not supported 11: Not supported Edge 12 - 18: Not supported 79 - 100: Supported 101: Supported ...
首先,我们需要在每个需要进行通信的页面中创建一个 BroadcastChannel 实例。可以使用以下代码创建一个 BroadcastChannel: const channel = new BroadcastChannel('my-channel'); 1. 在上述代码中,‘my-channel’ 是一个自定义的通道名称,用于标识不同的通信频道。确保在所有页面中使用相同的通道名称。
BroadcastChannel 允许在相同的源(通常页面来自相同的网站)在浏览器上下文(windows,tabs,frames或者iframes)之间进行简单的通信. 通信的方式如图: Broadcast Channel 与 window.postMessage区别 BroadcastChannel,叫做“广播频道”,官方文档说,该API是用于同源不同页面之间完成通信的功能。
BroadcastChannel 2025年01月19日 柏拉文 越努力,越幸运 一、认识BroadcastChannel API 创建一个频道,所有同源的标签页可以通过频道发送和接收消息。二、实现2.1 发布消息const channel = new BroadcastChannel('my_channel');// 发送消息channel.postMessage({ text: 'Hello, Tabs!' });2.2 接收消息...
BroadcastChannel 实现了实时消息广播机制,适用于在同一域名下的多个窗口、标签页或 iframe 之间进行实时消息广播。 怎么选择 如果是跨域之间的交互只能是postMessage。 如果同域之间双向互通使用MessageChannel。 如果实现广播则使用BroadcastChannel。 postMessage