快捷導(dǎo)航

JavaScript使用Broadcast?Channel實(shí)現(xiàn)前端跨標(biāo)簽頁(yè)通信

更新時(shí)間：2024年04月22日 08:19:54 作者：MerkleJqueryRu

這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用Broadcast?Channel實(shí)現(xiàn)前端跨標(biāo)簽頁(yè)通信,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

在開(kāi)發(fā)Web應(yīng)用程序時(shí)，有時(shí)候需要在不同的瀏覽器標(biāo)簽頁(yè)之間進(jìn)行通信。例如，你可能需要在一個(gè)標(biāo)簽頁(yè)中做出的更改在另一個(gè)標(biāo)簽頁(yè)中反映出來(lái)，或者需要在用戶在一個(gè)標(biāo)簽頁(yè)中執(zhí)行某些操作時(shí)向其他標(biāo)簽頁(yè)發(fā)送消息。為了實(shí)現(xiàn)這樣的跨標(biāo)簽頁(yè)通信，我們可以借助HTML5提供的Broadcast Channel API。

實(shí)現(xiàn)步驟

首先，我們需要?jiǎng)?chuàng)建兩個(gè)文件：一個(gè)HTML文件和一個(gè)JavaScript文件。

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./crossTabMsg.js"></script>
</head>
<body>
    <button id="btn">發(fā)送消息</button>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            sendMsg('test', 'hello');
        }
        listenMsg(function(msg) {
            console.log(msg);
        })
    </script>
</body>
</html>

JavaScript文件（crossTabMsg.js）：

const channel = new BroadcastChannel('cross-tab-msg');

function sendMsg(type, msg) {
    channel.postMessage({type, msg});
}

function listenMsg(callback) {
    channel.addEventListener('message', e => {
        callback && callback(e.data);
    });
}

在HTML文件中，我們創(chuàng)建了一個(gè)按鈕，并為其添加了一個(gè)點(diǎn)擊事件處理程序。當(dāng)用戶點(diǎn)擊按鈕時(shí)，我們調(diào)用sendMsg函數(shù)發(fā)送一條消息。同時(shí)，我們也調(diào)用listenMsg函數(shù)來(lái)監(jiān)聽(tīng)來(lái)自其他標(biāo)簽頁(yè)的消息，并在控制臺(tái)中打印出來(lái)。

在JavaScript文件中，我們創(chuàng)建了一個(gè)名為cross-tab-msg的新的Broadcast Channel，并定義了兩個(gè)函數(shù)：sendMsg用于發(fā)送消息，listenMsg用于監(jiān)聽(tīng)消息。當(dāng)收到消息時(shí)，listenMsg函數(shù)會(huì)觸發(fā)回調(diào)函數(shù)，并將接收到的消息作為參數(shù)傳遞給回調(diào)函數(shù)。

使用方法

要在不同的標(biāo)簽頁(yè)之間進(jìn)行通信，只需在這些標(biāo)簽頁(yè)中加載相同的HTML和JavaScript文件即可。當(dāng)你在一個(gè)標(biāo)簽頁(yè)中點(diǎn)擊按鈕發(fā)送消息時(shí)，其他標(biāo)簽頁(yè)中的監(jiān)聽(tīng)器將會(huì)接收到這條消息，并執(zhí)行相應(yīng)的操作。

結(jié)論

通過(guò)使用Broadcast Channel API，我們可以輕松地實(shí)現(xiàn)跨標(biāo)簽頁(yè)通信，使得不同標(biāo)簽頁(yè)之間可以方便地進(jìn)行消息傳遞和數(shù)據(jù)共享。這為開(kāi)發(fā)復(fù)雜的Web應(yīng)用程序提供了更多的可能性和靈活性。

方法補(bǔ)充

除了上文的方法，小編還為大家整理了其他JavaScript跨標(biāo)簽頁(yè)通信的方法，希望對(duì)大家有所幫助

1.localstorage

<!-- 1.html -->
<script>
  if(!localStorage.getItem('a')){
		localStorage.setItem('a',1)
	}else{
		var sum = localStorage.getItem('a')
		localStorage.setItem('a', +sum + 1)
	}
</script>

<!-- 2.html  -->
<script>
  window.addEventListener('storage', (e) => console.log(e))
</script>

sessionStorage.setItem('message', '我是sessionStorage的值');
// 觸發(fā)自定義事件來(lái)通知其他標(biāo)簽頁(yè)
var event = new Event('sessionStorageUpdated');
window.dispatchEvent(event);
 
window.addEventListener('storage', function(event) {
  if (event.key === 'message') {
    var message = sessionStorage.getItem('message');
    console.log('message:', message);
  }
});
 
// 監(jiān)聽(tīng)自定義事件來(lái)檢測(cè) `sessionStorage` 的更新
window.addEventListener('sessionStorageUpdated', function() {
  var message = sessionStorage.getItem('message');
  console.log('message:', message);
});

2.postMessage

<!-- 1.html -->
<body>
    <button class="pop">彈出新窗口</button>
    <button class="button">發(fā)送數(shù)據(jù)</button>
    <script>
      const pop = document.querySelector('.pop');
      const button = document.querySelector('.button');

      let index = 0;
      let opener = null;

      pop.addEventListener('click', () => {
        opener = window.open(
          '2.html',
          '123',
          'height=600,width=600,top=20,resizeable=yes'
        );
      });

      button.addEventListener('click', () => {
        const data = {
          value: `moment ${index++}`,
        };

        opener.postMessage(data, '*');
      });
    </script>
  </body>

  <!-- 2.html -->
  <body>
  <div>postMessage  2.html</div>
  <script>
    window.addEventListener("message", (e) => {
      console.log(e.data);
    });
  </script>
</body>

3.SharedWorker

<!-- a.html -->
<script>
  let index = 0;
  const worker = new SharedWorker("worker.js");

  setInterval(() => {
    worker.port.postMessage(`moment ${index++}`);
  }, 1000);
</script>

<!-- b.html -->
<script>
  const worker = new SharedWorker("worker.js");

  worker.port.start();
  setInterval(() => {
    worker.port.postMessage("php是世界上最好的語(yǔ)言");
  }, 1000);

  worker.port.onmessage = function (e) {
    if (e.data) {
      console.log(e.data);
    }
  };
</script>

創(chuàng)建一個(gè) worker.js 文件,并編寫(xiě)以下代碼：

let data = "";

self.onconnect = (e) => {
  const port = e.ports[0];

  port.onmessage = function (e) {
    if (e.data === "php是世界上最好的語(yǔ)言") {
      port.postMessage(data);
      data = "";
    } else {
      data = e.data;
    }
  };
};

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

您可能感興趣的文章: