BroadcastChannel 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。
前言
最近跨标签页数据传输这类功能点比较火，因为现在跨标签同步数据共享的需求越来越多了，所以大家伙也就都探讨这类功能点的实现方式。
今天我就在 Vue3 项目中，给大家演示一下纯前端如何实现跨标签通信：
1、BroadCast Channel
2、Service Worker
3、LocalStorage + onstorage
4、open + postMessage
我先准备一个基础页面，代码如下：
图片
并打开两个 Tab，以下都通过这两个 Tab 来进行代码演示：
图片
BroadCast Channel
BroadcastChannel 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。
其实关键就几个方法：
- postMessage：发送消息
- onmessage：接收消息
- close：停止监听
图片
可以看到第二个 Tab 能接收到第一个 Tab 发出的消息。
图片
图片
那么我们现在可以用它来完成两边数据的同步了。
实现了我们想要的效果！
图片
图片
Service Worker
Service Worker 本质上充当 Web 应用程序、浏览器与网络（可用时）之间的代理服务器。这个 API 旨在创建有效的离线体验，它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的资源。它还提供入口以推送通知和访问后台同步 API。
首先在public文件夹下新建一个sw.js。
图片
重点就是几个方法：
- register：注册 Service Worker
- postMessage：发送消息
- onmessage：接收消息
首先在页面中注册这个 Service Worker，这样才能确保通过 Service Worker 来进行发消息和接收消息。
图片
图片
接下来进行消息发送和消息接收：
图片
达到了想要的同步效果：
图片
LocalStorage + onstorage
当我们在同域同源下，修改 LocalStorage 的时候，会触发同域同源下window.onstorage订阅函数。
我们可以利用这个特性，实现不同 Tab 之间的通信，代码如下：
图片
效果如下：
图片
open + postMessage
当你使用window.open打开另一个同源标签页时，可以使用postMessage对这个新开的标签页进行通信，新标签页可以使用addEventListener('message')进行接收信息。
图片
可以达到我们想要的效果：
图片
©本文为清一色官方代发，观点仅代表作者本人，与清一色无关。清一色对文中陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完整性提供任何明示或暗示的保证。本文不作为投资理财建议，请读者仅作参考，并请自行承担全部责任。文中部分文字/图片/视频/音频等来源于网络，如侵犯到著作权人的权利，请与我们联系（微信/QQ:1074760229）。转载请注明出处：清一色财经
微信扫码打赏 
支付宝扫码打赏 
