教育培训机构网站源码,装修设计网站哪个好用,哪家手机网站建设,wordpress 代替cms前端Broadcast Channel API的简单使用 Broadcast Channel API 是一个用于在不同窗口或标签页之间进行通信的 API。它允许一个页面向另一个页面发送消息#xff0c;这些页面可以在同一浏览器实例中打开#xff0c;或者在不同的浏览器实例中打开。 以下是 Broadcast Channel …前端Broadcast Channel API的简单使用 Broadcast Channel API 是一个用于在不同窗口或标签页之间进行通信的 API。它允许一个页面向另一个页面发送消息这些页面可以在同一浏览器实例中打开或者在不同的浏览器实例中打开。 以下是 Broadcast Channel API 的简单使用步骤 1.创建广播频道 在发送消息的页面中首先需要创建一个 Broadcast Channel可以使用 new BroadcastChannel(channelName) 构造函数。channelName 是频道的名称所有使用相同名称的页面都能收到彼此的消息。 // 发送消息的页面 const channel new BroadcastChannel(myChannel);2.发送消息 通过广播频道发送消息。可以使用 postMessage 方法来发送任意数据。 // 发送消息的页面 const message Hello from Page 1!; channel.postMessage(message);3.接收消息 在接收消息的页面中同样需要创建一个同名的广播频道并通过 addEventListener 监听消息事件。 // 接收消息的页面 const channel new BroadcastChannel(myChannel); //使用方法一 handleMessage(event) {console.log(Received message:, event.data); } channel.addEventListener(message, handleMessage); //使用方法二 bc.onmessage (event) {console.log(Received message:, event.data); };4.关闭频道 当不再需要广播频道时最好在页面关闭或不再需要通信的时候移除监听器以释放资源。 切记最好在页面关闭或不再需要通信的时候移除监听器否则重新进入页面时会再次创建一个监听器上次创建的监听器还存在这样的话每次进入页面都会创建一个。 //方式一的移除 bc.onmessagenull; //方式二的关闭和移除 channel.close(); channel.removeEventListener(message, handleMessage);请注意使用 Broadcast Channel API 的两个页面必须在同一协议http 或 https下否则无法进行通信。此外同一页面打开多个标签页也可以通过 Broadcast Channel 进行通信。 这是 Broadcast Channel API 的基本用法你可以根据需要在不同页面之间传递更复杂的数据。这对于在单页应用程序中或多个窗口之间共享状态非常有用。 5.完整示例 1发送消息的页面 templatediv classapp-containerinput typetext v-modelmessage placeholder请输入要发送的消息button clicksendMessage发送/button/div /template script export default {data() {return {message: };},methods: {sendMessage() {// 创建一个名为 example-channel 的 Broadcast Channelconst channel new BroadcastChannel(example-channel);// 发送消息到频道channel.postMessage(this.message);// 发送完消息后关闭频道channel.close();// 清空消息输入框this.message ;}} } /script2接收消息的页面 templatediv classapp-containerp接收到的消息: {{ receivedMessage }}/p/div /template script export default {data() {return {receivedMessage: };},methods: {handleReceivedMessage(event) {this.receivedMessage event.data;}},mounted() {const channel new BroadcastChannel(example-channel);// 添加事件监听器channel.addEventListener(message, this.handleReceivedMessage);},beforeDestroy() {const channel new BroadcastChannel(example-channel);// 移除事件监听器channel.removeEventListener(message, this.handleReceivedMessage);} } /script在这个示例中我们在Vue实例的 mounted 生命周期钩子中使用 addEventListener 添加了一个名为 “example-channel” 的 Broadcast Channel 的 message 事件监听器。在 beforeDestroy 钩子中我们使用 removeEventListener 移除了相同的事件监听器以避免在组件销毁时引起内存泄漏。 这种方式相对于直接使用 channel.onmessage 更符合 Vue 组件的生命周期管理确保在组件销毁前正确地移除了事件监听器。 文章参考 vue一个页面改变cookie的值另一个页面怎么同步监测cookie值的变化并更新页面数据