快捷導(dǎo)航

JavaScript實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)通信方式詳解

更新時(shí)間：2025年03月06日 11:02:35 作者：Epicurus

在瀏覽器中,多個(gè)標(biāo)簽頁(yè)（頁(yè)簽）之間的通信有一些方法可以實(shí)現(xiàn),這篇文章為大家整理了6個(gè)常用的方法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1. 使用 localStorage 和 storage 事件

原理：當(dāng) localStorage 或 sessionStorage 中的數(shù)據(jù)發(fā)生變化時(shí)，會(huì)觸發(fā) storage 事件，其他同源頁(yè)面可以監(jiān)聽此事件來實(shí)現(xiàn)通信。

// 發(fā)送消息的頁(yè)面
localStorage.setItem('message', JSON.stringify({ text: 'Hello from Tab 1!' }));

// 接收消息的頁(yè)面
window.addEventListener('storage', (event) => {
  if (event.key === 'message') {
    const message = JSON.parse(event.newValue);
    console.log('Received:', message.text); // 輸出: "Hello from Tab 1!"
  }
});

特點(diǎn)：

適用于簡(jiǎn)單數(shù)據(jù)傳遞。
僅在同源頁(yè)面間生效。
storage 事件不會(huì)在修改數(shù)據(jù)的當(dāng)前標(biāo)簽頁(yè)觸發(fā)。

2. 使用 BroadcastChannel API

原理：通過 BroadcastChannel 創(chuàng)建一個(gè)命名頻道，多個(gè)頁(yè)面訂閱同一頻道后，可以通過該頻道廣播消息。

// 發(fā)送消息的頁(yè)面
const channel = new BroadcastChannel('my-channel');
channel.postMessage({ text: 'Hello from Tab 1!' });

// 接收消息的頁(yè)面
const channel = new BroadcastChannel('my-channel');
channel.onmessage = (event) => {
  console.log('Received:', event.data.text); // 輸出: "Hello from Tab 1!"
};

特點(diǎn)：

支持復(fù)雜對(duì)象傳遞。
僅在同源頁(yè)面間生效。
現(xiàn)代瀏覽器支持良好（IE 不支持）。

3. 使用 SharedWorker

原理：通過共享的后臺(tái)線程（SharedWorker）作為中介，多個(gè)頁(yè)面通過該線程傳遞消息。

// SharedWorker 腳本（shared-worker.js）
self.onconnect = (event) => {
  const port = event.ports[0];
  port.onmessage = (e) => {
    // 收到消息后廣播給所有連接的頁(yè)面
    port.postMessage(e.data);
  };
};

// 發(fā)送消息的頁(yè)面
const worker = new SharedWorker('shared-worker.js');
worker.port.postMessage({ text: 'Hello from Tab 1!' });

// 接收消息的頁(yè)面
const worker = new SharedWorker('shared-worker.js');
worker.port.onmessage = (event) => {
  console.log('Received:', event.data.text); // 輸出: "Hello from Tab 1!"
};

特點(diǎn)：

支持復(fù)雜通信場(chǎng)景。
需要處理 SharedWorker 的生命周期。
兼容性較好（IE 不支持）。

4. 使用 window.postMessage

原理：通過 window.open() 或 window.opener 獲取其他頁(yè)面的引用，直接通過 postMessage 發(fā)送消息。

// 打開新頁(yè)簽并發(fā)送消息
const newTab = window.open('https://example.com/tab2');
newTab.postMessage({ text: 'Hello from Tab 1!' }, 'https://example.com');

// 接收消息的頁(yè)面
window.addEventListener('message', (event) => {
  if (event.origin === 'https://example.com') {
    console.log('Received:', event.data.text); // 輸出: "Hello from Tab 1!"
  }
});

特點(diǎn)：

需要明確的頁(yè)面引用（通過 window.open 或 window.opener）。
支持跨域通信（需目標(biāo)頁(yè)面允許）。

5. 使用 IndexedDB

原理：通過共享的 IndexedDB 數(shù)據(jù)庫(kù)作為中介，多個(gè)頁(yè)面監(jiān)聽數(shù)據(jù)庫(kù)變化。

// 發(fā)送消息的頁(yè)面
const db = await openDB('my-db', 1);
await db.put('messages', { text: 'Hello from Tab 1!' });

// 接收消息的頁(yè)面
const db = await openDB('my-db', 1);
db.on('changes', (changes) => {
  changes.forEach((change) => {
    if (change.type === 'put') {
      console.log('Received:', change.value.text); // 輸出: "Hello from Tab 1!"
    }
  });
});

特點(diǎn)：

適用于需要持久化存儲(chǔ)的場(chǎng)景。
實(shí)現(xiàn)相對(duì)復(fù)雜。

6. 使用 Service Worker

原理：通過 Service Worker 作為消息中轉(zhuǎn)站，多個(gè)頁(yè)面與 Service Worker 通信。

// Service Worker 腳本（sw.js）
self.addEventListener('message', (event) => {
  event.waitUntil(
    self.clients.matchAll().then((clients) => {
      clients.forEach((client) => {
        client.postMessage(event.data);
      });
    })
  );
});

// 發(fā)送消息的頁(yè)面
navigator.serviceWorker.controller.postMessage({ text: 'Hello from Tab 1!' });

// 接收消息的頁(yè)面
navigator.serviceWorker.addEventListener('message', (event) => {
  console.log('Received:', event.data.text); // 輸出: "Hello from Tab 1!"
});

特點(diǎn)：

支持離線場(chǎng)景。
需要 HTTPS 環(huán)境（本地開發(fā)除外）。

總結(jié)

方法	適用場(chǎng)景	兼容性	復(fù)雜度
localStorage	簡(jiǎn)單數(shù)據(jù)同步	所有現(xiàn)代瀏覽器	低
BroadcastChannel	實(shí)時(shí)消息傳遞	現(xiàn)代瀏覽器	中
SharedWorker	復(fù)雜通信場(chǎng)景	現(xiàn)代瀏覽器	高
window.postMessage	跨域或父子頁(yè)面通信	所有瀏覽器	中
IndexedDB	持久化數(shù)據(jù)共享	所有現(xiàn)代瀏覽器	高
Service Worker	離線或后臺(tái)通信	現(xiàn)代瀏覽器	高