前言

最近跨標簽頁數據傳輸這類功能點比較火，因為現在跨標簽同步數據共享的需求越來越多了，所以大家伙也就都探討這類功能點的實現方式。

今天我就在 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') 進行接收信息。

圖片

可以達到我們想要的效果：

圖片