快捷導(dǎo)航

JavaScript常見的跨標(biāo)簽頁通信方式總結(jié)

更新時(shí)間：2023年10月27日 09:42:38 作者：前端俊剛

跨標(biāo)簽頁通信是指在瀏覽器中的不同標(biāo)簽頁之間進(jìn)行數(shù)據(jù)傳遞和通信的過程,這篇文章為大家整理了前端常見的跨標(biāo)簽頁通信方式,有需要的小伙伴可以了解下

引言

跨標(biāo)簽頁通信是指在瀏覽器中的不同標(biāo)簽頁之間進(jìn)行數(shù)據(jù)傳遞和通信的過程。在傳統(tǒng)的Web開發(fā)中，每個(gè)標(biāo)簽頁都是相互獨(dú)立的，無法直接共享數(shù)據(jù)。然而，有時(shí)候我們需要在不同的標(biāo)簽頁之間進(jìn)行數(shù)據(jù)共享或者實(shí)現(xiàn)一些協(xié)同操作，這就需要使用跨標(biāo)簽頁通信來實(shí)現(xiàn)。

常見的跨標(biāo)簽頁方案如下

BroadCast Channel
Service Worker
LocalStorage window.onstorage 監(jiān)聽
window.open、window.postMessage
Shared Worker 定時(shí)器輪詢（ setInterval ）
IndexedDB 定時(shí)器輪詢（ setInterval ）
cookie 定時(shí)器輪詢（ setInterval ）
Websocket

本文先介紹前面4種

BroadCast Channel

Broadcast Channel API 可以實(shí)現(xiàn)同源下瀏覽器不同窗口，Tab 頁，frame 或者 iframe 下的(通常是同一個(gè)網(wǎng)站下不同的頁面) 之間的簡單通訊。

通過創(chuàng)建一個(gè)監(jiān)聽某個(gè)頻道下的 BroadcastChannel對象，你可以接收發(fā)送給該頻道的所有消息。一個(gè)有意思的點(diǎn)是，你不需要再維護(hù)需要通信的 iframe 或 worker 的索引。它們可以通過構(gòu)造 BroadcastChannel 來簡單地“訂閱”特定頻道，并在它們之間進(jìn)行全雙工（雙向）通信。

示例

通過創(chuàng)建一個(gè)廣播頻道，并在不同的標(biāo)簽頁中監(jiān)聽該頻道，可以實(shí)現(xiàn)跨標(biāo)簽頁通信。

例如，在一個(gè)標(biāo)簽頁中發(fā)送消息：

const channel = new BroadcastChannel('myChannel');
channel.postMessage('Hello from Tab 1!');

在另一個(gè)標(biāo)簽頁中接收消息：

const channel = new BroadcastChannel('myChannel');
channel.onmessage = function(event) {
  console.log(event.data); // 輸出：Hello from Tab 1!
};

可以通過調(diào)用 BroadcastChannel 對象的 close()方法，可以離開頻道。這將斷開該對象和其關(guān)聯(lián)的頻道之間的聯(lián)系，并允許它被垃圾回收。

// 斷開頻道連接
channel.close();

Service Worker

Service worker 本質(zhì)上充當(dāng) Web 應(yīng)用程序、瀏覽器與網(wǎng)絡(luò)（可用時(shí)）之間的代理服務(wù)器。這個(gè) API 旨在創(chuàng)建有效的離線體驗(yàn)，它會(huì)攔截網(wǎng)絡(luò)請求并根據(jù)網(wǎng)絡(luò)是否可用來采取適當(dāng)?shù)膭?dòng)作、更新來自服務(wù)器的的資源。它還提供入口以推送通知和訪問后臺(tái)同步 API。

Service worker 是一個(gè)注冊在指定源和路徑下的事件驅(qū)動(dòng)worker。它采用 JavaScript 文件的形式，控制關(guān)聯(lián)的頁面或者網(wǎng)站，攔截并修改訪問和資源請求，細(xì)粒度地緩存資源。你可以完全控制應(yīng)用在特定情形（最常見的情形是網(wǎng)絡(luò)不可用）下的表現(xiàn)。

使用 ServiceWorkerContainer.register() 方法首次注冊 service worker。如果注冊成功，service worker 就會(huì)被下載到客戶端并嘗試安裝或激活，這將作用于整個(gè)域內(nèi)用戶可訪問的 URL，或者其特定子集。

示例

index.html

<body>
    <h1>頁面一</h1>
    <button>發(fā)送</button>
    <script>
        navigator.serviceWorker.register('./sw.js')
            .then(() => {
                console.log("service worker 注冊成功");
            });
        document.querySelector("button").onclick = function () {
            navigator.serviceWorker.controller.postMessage('hello');
        }
    </script>
</body>

index2.html

<body>
    <h1>頁面二</h1>
    <script>
        navigator.serviceWorker.register('./sw.js')
            .then(() => {
                console.log("service worker 注冊成功");
            });
        navigator.serviceWorker.onmessage = function ({ data }) {
            console.log(data);
        }
    </script>
</body>

sw.js

self.addEventListener("message",async event=>{
    const clients = await self.clients.matchAll();
    clients.forEach(function(client){
        client.postMessage(event.data)
    });
});

LocalStorage window.onstorage

存儲(chǔ)在 localStorage 的數(shù)據(jù)可以長期保留；而當(dāng)頁面會(huì)話結(jié)束——也就是說，當(dāng)頁面被關(guān)閉時(shí)，存儲(chǔ)在 sessionStorage 的數(shù)據(jù)會(huì)被清除。

另外，localStorage 中的鍵值對總是以字符串的形式存儲(chǔ)。 (需要注意，和 js 對象相比，鍵值對總是以字符串的形式存儲(chǔ)意味著數(shù)值類型會(huì)自動(dòng)轉(zhuǎn)化為字符串類型).

當(dāng)存儲(chǔ)區(qū)域（localStorage 或 sessionStorage）被修改時(shí)，將觸發(fā) storage 事件。

由事件監(jiān)聽器發(fā)送給回調(diào)函數(shù)的事件對象有幾個(gè)屬性如下：

Property	Type	Description
target 只讀	[EventTarget]	事件目標(biāo) (DOM 樹中的最大目標(biāo))
type 只讀	[DOMString]	事件的類型
bubbles 只讀	[Boolean]	事件通常是否會(huì)出現(xiàn)冒泡
cancelable 只讀	[Boolean]	事件是否可取消
key 只讀	[DOMString] (string)	鍵更改時(shí)
oldValue 只讀	[DOMString] (string)	正在更改鍵的舊值
newValue 只讀	[DOMString] (string)	正在更改鍵的新值
url 只讀	DOMString	鍵更改的文檔的地址
storageArea 只讀	[Storage]	受影響的存儲(chǔ)對象

示例

例如，在一個(gè)標(biāo)簽頁中修改LocalStorage的值：

localStorage.setItem('message', 'Hello from Tab 1!');

在另一個(gè)標(biāo)簽頁中監(jiān)聽LocalStorage的變化：

window.onstorage = function(event) {
  if (event.key === 'message') {
    console.log(event.newValue); // 輸出：Hello from Tab 1!
  }
};

window.open、window.postMessage

通過在一個(gè)標(biāo)簽頁中使用window.open打開另一個(gè)標(biāo)簽頁，并使用window.postMessage進(jìn)行消息傳遞，可以實(shí)現(xiàn)跨標(biāo)簽頁通信。

window.open()

open()
open(url)
open(url, target)
open(url, target, windowFeatures)

url: 一個(gè)字符串，表示要加載的資源的 URL 或路徑。如果指定空字符串（""）或省略此參數(shù)，則會(huì)在目標(biāo)瀏覽上下文中打開一個(gè)空白頁。
target: 一個(gè)不含空格的字符串，用于指定加載資源的瀏覽上下文的名稱。
windowFeatures: 一個(gè)字符串，包含以逗號分隔的窗口特性列表。

window.postMessage() 方法可以安全地實(shí)現(xiàn)跨源通信。通常，對于兩個(gè)不同頁面的腳本，只有當(dāng)執(zhí)行它們的頁面位于具有相同的協(xié)議（通常為 https），端口號（443 為 https 的默認(rèn)值），以及主機(jī) (兩個(gè)頁面的模數(shù) Document.domain設(shè)置為相同的值) 時(shí)，這兩個(gè)腳本才能相互通信。window.postMessage() 方法提供了一種受控機(jī)制來規(guī)避此限制，只要正確的使用，這種方法就很安全。

示例

例如，在一個(gè)標(biāo)簽頁中發(fā)送消息：

const newTab = window.open('other.html');
newTab.postMessage('Hello from Tab 1!', '*');

在另一個(gè)標(biāo)簽頁中接收消息：

window.addEventListener('message', function(event) {
  console.log(event.data); // 輸出：Hello from Tab 1!
});

總結(jié)

BroadCast Channel：使用Broadcast Channel API可以在不同的瀏覽器上下文之間進(jìn)行消息廣播和接收。通過創(chuàng)建一個(gè)廣播頻道，并在不同的標(biāo)簽頁中監(jiān)聽該頻道，可以實(shí)現(xiàn)跨標(biāo)簽頁通信。
Service Worker：Service Worker是一種在瀏覽器后臺(tái)運(yùn)行的腳本，可以攔截和處理網(wǎng)絡(luò)請求。通過在Service Worker中監(jiān)聽和處理消息事件，可以實(shí)現(xiàn)跨標(biāo)簽頁通信。
LocalStorage window.onstorage 監(jiān)聽：通過在不同的標(biāo)簽頁中監(jiān)聽LocalStorage的變化，可以實(shí)現(xiàn)跨標(biāo)簽頁通信。當(dāng)一個(gè)標(biāo)簽頁修改LocalStorage的值時(shí)，其他標(biāo)簽頁可以通過監(jiān)聽storage事件來獲取最新值。
window.open、window.postMessage：通過在一個(gè)標(biāo)簽頁中使用window.open打開另一個(gè)標(biāo)簽頁，并使用window.postMessage進(jìn)行消息傳遞，可以實(shí)現(xiàn)跨標(biāo)簽頁通信。這種方式適用于需要直接傳遞數(shù)據(jù)或消息的場景。

這些方案各有特點(diǎn)和適用場景。Broadcast Channel適用于需要實(shí)時(shí)廣播消息給所有打開的標(biāo)簽頁的場景；Service Worker適用于需要在后臺(tái)進(jìn)行數(shù)據(jù)處理或者發(fā)送消息給其他標(biāo)簽頁的場景；LocalStorage window.onstorage監(jiān)聽適用于需要共享數(shù)據(jù)并及時(shí)獲取更新的場景；window.open、window.postMessage適用于需要直接傳遞數(shù)據(jù)或消息的場景。

到此這篇關(guān)于JavaScript常見的跨標(biāo)簽頁通信方式總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript跨標(biāo)簽頁通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: