JavaScript使用Broadcast?Channel實現前端跨標簽頁通信

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

這篇文章主要為大家詳細介紹了JavaScript如何使用Broadcast?Channel實現前端跨標簽頁通信,感興趣的小伙伴可以跟隨小編一起學習一下

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

實現步驟

首先，我們需要創(chuàng)建兩個文件：一個HTML文件和一個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)建了一個按鈕，并為其添加了一個點擊事件處理程序。當用戶點擊按鈕時，我們調用sendMsg函數發(fā)送一條消息。同時，我們也調用listenMsg函數來監(jiān)聽來自其他標簽頁的消息，并在控制臺中打印出來。

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

使用方法

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

結論

通過使用Broadcast Channel API，我們可以輕松地實現跨標簽頁通信，使得不同標簽頁之間可以方便地進行消息傳遞和數據共享。這為開發(fā)復雜的Web應用程序提供了更多的可能性和靈活性。

方法補充

除了上文的方法，小編還為大家整理了其他JavaScript跨標簽頁通信的方法，希望對大家有所幫助

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ā)自定義事件來通知其他標簽頁
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)聽自定義事件來檢測 `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ā)送數據</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是世界上最好的語言");
  }, 1000);

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

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

let data = "";

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

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

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

您可能感興趣的文章: