一、同源網站下的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
