快捷導(dǎo)航

JS實現(xiàn)前端多標簽頁通信BroadcastChannel

更新時間：2025年10月21日 10:01:35 作者：CC碼碼

BroadcastChannel 是一種用于同源不同窗口/標簽頁間通信的 API,可解決多標簽頁狀態(tài)同步問題,通過創(chuàng)建頻道并監(jiān)聽消息,可實現(xiàn)登錄狀態(tài)、頁面設(shè)置、業(yè)務(wù)數(shù)據(jù)等實時同步,下面就來詳細的介紹一下,感興趣的可以了解一下

背景

日常使用一些網(wǎng)站過程中，會發(fā)現(xiàn)當(dāng)打開一個網(wǎng)站多個標簽頁時，當(dāng)在其中一個標簽頁頁面退出登錄時，在其他標簽頁中還可以繼續(xù)操作，這里就存在一個狀態(tài)沒有實時統(tǒng)一的問題；其后當(dāng)操作發(fā)送請求時根據(jù)后端的登錄校驗情況會跳轉(zhuǎn)到登錄頁，而這個操作滯后了。比如常用的 AI 網(wǎng)站 DeepSeek。

那如何在多標簽頁下進行狀態(tài)的同步呢，這時候就要請出今天的“主人公”- BroadcastChannel。

來淺淺實踐一下

使用起來很簡單。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BroadcastChannel</title>
</head>
<body>
  <h1>BroadcastChannel</h1>
  <script>
    const channel = new BroadcastChannel('my-channel');
    channel.postMessage('hello world');

    channel.onmessage = (event) => {
      console.log(event.data);
    }
  </script>
</body>
</html>

效果

在兩個瀏覽器窗口中分別打開頁面，當(dāng)一個頁面刷新后發(fā)送消息時，之前打開的相同頁面收到了消息內(nèi)容，但是當(dāng)前頁面沒有收到消息內(nèi)容。

注意

適用于同源的不同瀏覽器窗口、瀏覽器標簽頁、iframe之間互相通信
通過 message 事件進行廣播
在監(jiān)聽該 channel 的所有 BroadcastChannel 對象上觸發(fā)，但是不包含發(fā)送消息的對象

應(yīng)用

舉兩個業(yè)務(wù)中會用到的例子：

同步登錄狀態(tài)

當(dāng)多個頁面處于未登錄狀態(tài)時，在其中一個頁面上登錄成功后，所有的頁面都會收到消息，更新登錄狀態(tài)及頁面路由。

// 登錄狀態(tài)管理
const authChannel = new BroadcastChannel('auth');

// 登錄成功后
function handleLogin(user) {
  localStorage.setItem('token', user.token);
  authChannel.postMessage({
    type: 'LOGIN_SUCCESS',
    user: user
  });
}

// 監(jiān)聽登錄狀態(tài)
authChannel.onmessage = (event) => {
  switch (event.data.type) {
    case 'LOGIN_SUCCESS':
      updateUserInfo(event.data.user);
      break;
    case 'LOGOUT':
      clearUserData();
      redirectToLogin();
      break;
  }
};

同步頁面設(shè)置

在多個 AI 對話頁面場景下，在其中一個頁面上個更改了 LLM 對話參數(shù) Temperature 時，其余頁面中相應(yīng)參數(shù)也會更改，避免后知后覺**。**

// 應(yīng)用配置同步
const configChannel = new BroadcastChannel('app-config');

// 管理員更新配置
function updateAppSettings(settings) {
  configChannel.postMessage({
    type: 'SETTINGS_UPDATED',
    settings: settings
  });
}

// 所有頁面應(yīng)用新配置
configChannel.onmessage = (event) => {
  if (event.data.type === 'SETTINGS_UPDATED') {
    applyNewSettings(event.data.settings);
    showNotification('配置已更新');
  }
};

同步業(yè)務(wù)數(shù)據(jù)

在多個頁面對比商品時，在其中一個頁面中加購商品后其余頁面也會更新購物車列表，保證數(shù)據(jù)的一致性。

// 購物車同步
const cartChannel = new BroadcastChannel('cart');

// 添加商品時通知其他標簽頁
function addToCart(product) {
  const cart = getCartFromStorage();
  cart.push(product);
  localStorage.setItem('cart', JSON.stringify(cart));
  
  cartChannel.postMessage({
    type: 'CART_UPDATE',
    cart: cart
  });
}

// 監(jiān)聽購物車變化
cartChannel.onmessage = (event) => {
  if (event.data.type === 'CART_UPDATE') {
    updateCartUI(event.data.cart);
  }
};

對比其他方案


通信方式	適用場景	特點
BroadcastChannel	同源標簽頁通信	簡單易用，不支持跨域
LocalStorage 事件	簡單數(shù)據(jù)同步	兼容性好，數(shù)據(jù)大小限制
SharedWorker	復(fù)雜數(shù)據(jù)共享	功能強大，實現(xiàn)復(fù)雜
Window.postMessage	跨域通信	需要引用目標窗口