關鍵字：：跨頁面通訊、廣播頻道 API 通訊、SharedWorker
有幾種方法可以在瀏覽器中的多個選項卡之間進行通訊：
使用廣播頻道 API：廣播頻道 API 是 HTML5 提供的一種跨頁面通訊機制。 該 API 允許您在不同選項卡之間傳送訊息，以實現實時、雙向通訊。 使用 localstorage 或 sessionstorage：localstorage 和 sessionstorage 是瀏覽器提供的本地儲存機制。 跨表通訊可以通過在乙個選項卡中修改 localstorage 或 sessionstorage 中的資料，然後在其他選項卡中偵聽該資料的更改來實現。 使用 sharedworker：sharedworker 是一種特殊型別的 Web worker，可由多個瀏覽器選項卡共享。 使用 sharedworker，不同的選項卡可以通過訊息傳遞進行通訊。 Cookie 的使用：通過在同一域下設定 Cookie，不同的選項卡可以共享此 Cookie 資料。 可以在乙個選項卡中設定cookie，然後在另乙個選項卡中讀取以進行通訊。 使用視窗postmessage：window.postmessage 方法支援不同瀏覽器視窗之間的跨域通訊。 您可以在乙個視窗中使用 postmessage 方法將訊息傳送到其他視窗，接收視窗通過偵聽訊息事件來接收和處理訊息。 廣播頻道 API 是 HTML5 提供的一種跨頁面通訊機制，它支援同一網域名稱下的多個瀏覽器選項卡之間的實時雙向通訊。
使用廣播頻道 API，您可以建立乙個頻道，不同的選項卡可以通過該頻道傳送和接收訊息。 每個選項卡都偵聽通道中的訊息，並相應地處理收到的訊息。
使用廣播頻道 API 實現多個選項卡之間的通訊的步驟如下：
1. 建立乙個 broadcastchannel 物件並指定唯一的頻道名稱：
const channel = new broadcastchannel('channelname');2. 在乙個選項卡中傳送訊息：
channel.postmessage('message');3. 收聽訊息並在其他選項卡中回覆：
channel.addeventlistener('message', event => )通過廣播頻道API，不同的標籤頁可以實時收發訊息，從而實現多個標籤頁之間的通訊。 這對於跨多個選項卡共享狀態、同步資料或啟用協作等方案非常有用。 請注意，廣播頻道 API 僅適用於同一網域名稱下的選項卡之間，不支援跨域通訊。
SharedWorker 是在 HTML5 提供的多個選項卡之間共享的 Web Worker。 使用 sharedworker，多個瀏覽器選項卡可以共享單個後台執行緒，以便進行跨頁面通訊和資料共享。
下面是使用 sharedworker 在多個選項卡之間進行通訊的示例：
在 j**ascript 檔案中 （workerjs）。
// worker.JS 在共享工作執行緒自身中偵聽訊息onconnect = function(event) ;處理埠。 斷開連線時onclose = function()在多個頁面中引入共享工作執行緒，並相互通訊：
第 1 頁var sharedworker = new sharedworker（'worker.js');獲取共享 worker 的埠var port = sharedworkerport;傳送訊息埠postmessage('message from page 1');接收訊息埠onmessage = function(event) ;第 2 頁var sharedworker = new sharedworker（'worker.js');獲取共享 worker 的埠var port = sharedworkerport;傳送訊息埠postmessage('message from page 2');接收訊息埠onmessage = function(event) ;在上面的例子中，worker.js建立乙個 sharedworker，用於偵聽來自多個頁面的連線請求，並為每個連線建立乙個埠。 每個頁面通過建立 sharedworker 例項並獲取 port 物件來傳送和接收訊息。
通過 sharedworker，第 1 頁和第 2 頁可以跨選項卡進行通訊。 他們可以向共享工作執行緒傳送訊息並監聽共享工作執行緒返回的訊息，從而實現跨頁面資料互動和共享。
需要注意的是，SharedWorker 需要在支援 SharedWorker 的瀏覽器中執行，並且需要在伺服器環境中執行，即通過 HTTP 或 HTTPS 協議訪問頁面才能工作。
window.postmessage()是 HTML5 提供的一種用於不同視窗之間跨域通訊的方法。 它可以安全地將訊息傳送到其他視窗，並在接收方視窗中觸發訊息事件。
這裡有乙個用途postmessage()跨視窗通訊示例：
在傳送郵件的視窗中：
向目標視窗傳送訊息postmessage('hello, world!', '');在接收訊息的視窗中：
偵聽訊息事件視窗addeventlistener('message', function(event) }在傳送訊息的視窗中，使用window.postmessage()傳送訊息，第乙個引數是要傳送的訊息內容，第二個引數是目標視窗的來源，可以是URL、網域名稱或萬用字元'*'。
在接收訊息的視窗中，通過偵聽message事件，可以從其他視窗捕獲訊息。 在事件處理程式中，傳遞event.origin您可以判斷郵件來自哪個域。 您可以根據需要進行安全檢查，以確保僅接收來自指定網域名稱的郵件。
需要注意的是，postmessage()通常用於跨視窗通訊，可以在不同的視窗或不同的網域名稱之間進行通訊。 使用時，需要確保目標視窗的源是可信的，以防止安全漏洞。 同時，接收訊息的視窗需要顯式監聽訊息事件並對其進行相應的處理。