在瀏覽器中，不同標(biāo)簽頁(yè)之間進(jìn)行通信是一個(gè)常見(jiàn)的需求，例如：

• 用戶在 A 標(biāo)簽頁(yè)登錄后，希望 B 標(biāo)簽頁(yè)自動(dòng)刷新?tīng)顟B(tài)。
• 多個(gè)頁(yè)面需要共享某個(gè)數(shù)據(jù)源或狀態(tài)。
• 實(shí)現(xiàn)“跨頁(yè)面廣播”功能（如通知所有打開(kāi)的頁(yè)面執(zhí)行某個(gè)操作）。

一、實(shí)現(xiàn)不同標(biāo)簽頁(yè)間通信的常見(jiàn)方式

二、推薦方案詳解

方法 1：使用 BroadcastChannel（推薦）

優(yōu)點(diǎn)：

• 簡(jiǎn)潔直觀
• 可以傳遞結(jié)構(gòu)化數(shù)據(jù)（包括 ArrayBuffer）
• 不依賴 DOM 或本地存儲(chǔ)
• 支持異步消息收發(fā)

示例代碼：

// 創(chuàng)建一個(gè)名為 'my_channel' 的廣播通道
const bc = new BroadcastChannel('my_channel');

// 監(jiān)聽(tīng)消息
bc.onmessage = function(event) {
  console.log('收到消息:', event.data);
};

// 發(fā)送消息
bc.postMessage({ type: 'login', user: 'Alice' });

注意：BroadcastChannel 是 同源策略 下的 API，即只有相同域名下的頁(yè)面才能接收到消息。

方法 2：使用 localStorage + storage 事件（兼容性最好）

優(yōu)點(diǎn)：

• 幾乎所有瀏覽器都支持
• 可用于簡(jiǎn)單的頁(yè)面間通信
• 可以結(jié)合 JSON 存儲(chǔ)復(fù)雜數(shù)據(jù)

示例代碼：

// 頁(yè)面 A 中設(shè)置 localStorage
localStorage.setItem('user', JSON.stringify({ name: 'Alice', status: 'logged_in' }));

// 頁(yè)面 B 中監(jiān)聽(tīng) storage 事件
window.addEventListener('storage', function(event) {
  if (event.key === 'user') {
    const user = JSON.parse(event.newValue);
    console.log('用戶狀態(tài)更新:', user);
  }
});

注意：

• storage 事件只在其他標(biāo)簽頁(yè)修改了 localStorage 時(shí)觸發(fā)，當(dāng)前頁(yè)面不會(huì)觸發(fā)。
• 數(shù)據(jù)必須是字符串格式，建議使用 JSON.stringify() 和 JSON.parse() 進(jìn)行轉(zhuǎn)換。

方法 3：使用 SharedWorker（適合多頁(yè)面共享計(jì)算邏輯）

優(yōu)點(diǎn)：

• 多頁(yè)面共享同一個(gè) Worker，可以作為“中介”
• 可以實(shí)現(xiàn)復(fù)雜的通信和狀態(tài)同步
• 支持結(jié)構(gòu)化數(shù)據(jù)傳輸

示例代碼：

shared-worker.js

let ports = [];

onconnect = function(e) {
  const port = e.ports[0];
  ports.push(port);

  port.onmessage = function(event) {
    // 接收到一個(gè)頁(yè)面的消息，廣播給所有連接的頁(yè)面
    ports.forEach(p => p.postMessage(event.data));
  };
};

頁(yè)面 A / 頁(yè)面 B

const worker = new SharedWorker('shared-worker.js');

worker.port.start(); // 啟動(dòng)端口通信

worker.port.onmessage = function(event) {
  console.log('從 SharedWorker 收到:', event.data);
};

// 發(fā)送消息給 SharedWorker
worker.port.postMessage('Hello from page');

注意：

• SharedWorker 在 Safari 和 iOS 上不支持。
• 需要啟用 port.start() 才能開(kāi)始通信。

方法 4：使用 window.postMessage() + iframe 共享頁(yè)面（跨域場(chǎng)景）

如果你需要跨域通信（比如 a.com 和 b.com），可以創(chuàng)建一個(gè)共享的 iframe 頁(yè)面（托管在雙方都能訪問(wèn)的域名下），通過(guò) postMessage() 實(shí)現(xiàn)跨域通信。

示例架構(gòu)：

頁(yè)面A（a.com） <===> 共享iframe（share.com） <===> 頁(yè)面B（b.com）

頁(yè)面 A 發(fā)送消息：

const iframe = document.getElementById('sharedIframe');
iframe.contentWindow.postMessage('Hello from A', 'https://share.com');

iframe 頁(yè)面接收并轉(zhuǎn)發(fā)：

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://a.com' && event.origin !== 'https://b.com') return;
  // 廣播給所有子窗口或父窗口
  window.parent.postMessage(event.data, event.origin);
});

頁(yè)面 B 接收消息：

window.addEventListener('message', function(event) {
  if (event.origin === 'https://share.com') {
    console.log('收到消息:', event.data);
  }
});

三、如何選擇合適的方法？

四、補(bǔ)充建議

• 如果你只需要在頁(yè)面間同步用戶登錄狀態(tài)、配置信息等輕量數(shù)據(jù)，localStorage 是最穩(wěn)妥的選擇。
• 如果你需要實(shí)時(shí)性強(qiáng)、結(jié)構(gòu)化數(shù)據(jù)通信，優(yōu)先使用 BroadcastChannel。
• 如果你在開(kāi)發(fā) PWA 或后臺(tái)系統(tǒng)，考慮使用 Service Worker + BroadcastChannel 做統(tǒng)一狀態(tài)管理。
• 對(duì)于大型項(xiàng)目，可以封裝一個(gè)統(tǒng)一的“跨頁(yè)面通信庫(kù)”，抽象掉底層差異。

總結(jié)

以上就是JavaScript中不同標(biāo)簽頁(yè)間通信的常見(jiàn)方式小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript標(biāo)簽頁(yè)間通信方式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論