JavaScript實現(xiàn)瀏覽器內(nèi)多個標簽頁通信方式詳解

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

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

1. 使用 localStorage 和 storage 事件

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

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

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

特點：

適用于簡單數(shù)據(jù)傳遞。
僅在同源頁面間生效。
storage 事件不會在修改數(shù)據(jù)的當前標簽頁觸發(fā)。

2. 使用 BroadcastChannel API

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

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

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

特點：

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

3. 使用 SharedWorker

原理：通過共享的后臺線程（SharedWorker）作為中介，多個頁面通過該線程傳遞消息。

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

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

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

特點：

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

4. 使用 window.postMessage

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

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

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

特點：

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

5. 使用 IndexedDB

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

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

// 接收消息的頁面
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!"
    }
  });
});

特點：

適用于需要持久化存儲的場景。
實現(xiàn)相對復雜。

6. 使用 Service Worker

原理：通過 Service Worker 作為消息中轉(zhuǎn)站，多個頁面與 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ā)送消息的頁面
navigator.serviceWorker.controller.postMessage({ text: 'Hello from Tab 1!' });

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

特點：

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

總結

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