快捷導(dǎo)航

JS實(shí)現(xiàn)前端多標(biāo)簽頁(yè)通信BroadcastChannel

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

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

背景

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

那如何在多標(biāo)簽頁(yè)下進(jìn)行狀態(tài)的同步呢，這時(shí)候就要請(qǐng)出今天的“主人公”- BroadcastChannel。

來(lái)淺淺實(shí)踐一下

使用起來(lái)很簡(jiǎn)單。

<!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>

效果

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

注意

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

應(yīng)用

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

同步登錄狀態(tài)

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

// 登錄狀態(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īng)登錄狀態(tài)
authChannel.onmessage = (event) => {
  switch (event.data.type) {
    case 'LOGIN_SUCCESS':
      updateUserInfo(event.data.user);
      break;
    case 'LOGOUT':
      clearUserData();
      redirectToLogin();
      break;
  }
};

同步頁(yè)面設(shè)置

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

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

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

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

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

在多個(gè)頁(yè)面對(duì)比商品時(shí)，在其中一個(gè)頁(yè)面中加購(gòu)商品后其余頁(yè)面也會(huì)更新購(gòu)物車(chē)列表，保證數(shù)據(jù)的一致性。

// 購(gòu)物車(chē)同步
const cartChannel = new BroadcastChannel('cart');

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

// 監(jiān)聽(tīng)購(gòu)物車(chē)變化
cartChannel.onmessage = (event) => {
  if (event.data.type === 'CART_UPDATE') {
    updateCartUI(event.data.cart);
  }
};

對(duì)比其他方案


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

總結(jié)

BroadcastChannel 非常適用于同源頁(yè)面在多窗口、多標(biāo)簽頁(yè)場(chǎng)景下的數(shù)據(jù)或狀態(tài)同步，做到保持相同頁(yè)面在同一時(shí)刻下數(shù)據(jù)的一致性。

到此這篇關(guān)于JS實(shí)現(xiàn)前端多標(biāo)簽頁(yè)通信BroadcastChannel的文章就介紹到這了,更多相關(guān)JS 標(biāo)簽頁(yè)通信BroadcastChannel內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: