一、同源网站下的tab通信
按照通信的特征可以分为三种方式: 点对点通信、广播通信、轮询通信
点对点通信: window.postMessage
广播通信: BroadCast Channel、Service Worker、 LocalStorage
轮训通信: IndexedDB
1.1 window.postMessage
场景: 在a页面使用window.open打开b页面,在b页面向a页面发送消息
特点: 类似点对点通信,其他同源页面无法接收到消息
原理:
A页面监听message事件
B页面使用postMessage发送消息
B页面可以获取A页面的window对象,一般使用window.opener
A页面
B页面
2.2 BroadCast Channel
BroadcastChannel 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。
特点: 广播通信
原理:
页面创建BroadCast Channel实例
为实例注册message事件
实现:
2.3 Service Worker
Service Worker 是一个运行在后台的 Worker，多页面间可以共享 Worker，使用 Worker 充当消息转发中心，实现多页面间的通信。
原理:
多 Tab 共用同一份 Service Worker，每一个 Tab 是为 Client，通过 Service Worker 向每一客户端推送消息实现通信
实现:
参考: https://blog.csdn.net/swl979623074/article/details/120338707
延伸: websocket、shareWorker
2.4 localstorage
localstorage 可以存储浏览器数据，同源时，共享数据。当同源下的两个 Tab 页需要监听对方数据变化时，使用 localstorage 是比较好的方式。
原理：
两个 Tab 页同源
A 页面监听storage
B 页面使用setItem更新数据时，此时 A 页面可以监听到localstorage数据的变化
实现：
延伸: cookie
2.5 IndexedDB
同源下的 Tab 可以访问相同的 IndexedDB，利用数据的全局存储特性，实现通信。
原理：
A 页面将数据存储到 IndexedDB 中
B 页面轮询查询 IndexedDB 中数据的变化
基于同样的原理，localstorage、sessionstorage 都可以采用这种方案
二、非同源网站下的tab通信
2.1 iframe
依靠 iframe 为媒介，可以实现非同源页面间的通信
参考: https://blog.csdn.net/swl979623074/article/details/120338707
https://www.exyb.cn/news/show-166575.html?action=onClick
网友评论