龙岩网站建设设计服务,建设一个网络平台要多少钱,怎么搭建自己的博客网站,平泉县住房和城乡建设局网站1. 描述
同源 的不同浏览器窗口#xff0c;Tab 页#xff0c;frame 或者 iframe 下的不同文档之间可以通过 BroadcastChannel 相互通信。
2. 构造函数
通过 BroadcastChannel 类传入的参数创建实例#xff0c;传入的参数将指定通道名称#xff0c;在同源环境下该通道可以…1. 描述
同源 的不同浏览器窗口Tab 页frame 或者 iframe 下的不同文档之间可以通过 BroadcastChannel 相互通信。
2. 构造函数
通过 BroadcastChannel 类传入的参数创建实例传入的参数将指定通道名称在同源环境下该通道可以相互通信一个名称只对应一个通道。
// 将创建的实例挂载到window上可以在浏览器全局访问该方法
// channelName即为指定的通道名称, 为字符串类型
window.broadcastChannel new BroadcastChannel(channelName);3. 通道名称
创建后的BroadcastChannel实例可以通过name属性来访问创建的通道名称。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
console.log(broadcastChannel.name);4. 方法使用
postMessage 发送信息以 message 事件的形式发送给每一个绑定到同一个通道名称的广播频道。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
// message为Object类型的消息
broadcastChannel.postMessage(message);onmessage 监听通道信息当频道收到信息时将触发message事件在事件的data属性中获取同一通道发送的信息数据。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
// 可以通过增加监听事件在event.data中获取到监听的广播信息。
broadcastChannel.addEventListener(message, (event) {console.log(event.data);
});// broadcastChannel.onmessage (event) {};close 关闭通道通信让其被垃圾回收必要的步骤浏览器浏览器没有其他方式知道频道不再被需要。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
// 当完成后断开与频道的连接
broadcastChannel.close();messageerror 一条无法反序列化的消息时将会触发该事件。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
// 可以通过增加监听事件在event.data中获取到监听的无法反序列化的广播信息。
broadcastChannel.addEventListener(messageerror, (event) {console.log(event.data);
});// broadcastChannel.onmessageerror (event) {};5. 题外话
在vue项目使用时可以在根组件上通过BroadcastChannel创建的对象监听message和播报postMessage同源同信道的广播信息组件销毁时通过close关闭通信并垃圾回收。项目内部通过eventBus、父子事件触发、注入方式等其他方式处理信息传递和监听这样收口在一处形成逻辑闭环。
