日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

在日常工作中，你可能會遇到同源頁面間通信的場景。針對這種場景，我們可以使用 localStorage 和 storage 事件來解決同源頁面間通信的問題。除此之外，我們還可以使用 Broadcast Channel API 來解決該問題。接下來，阿寶哥將帶大家一起來認識一下 Broadcast Channel API。

一、Broadcast Channel API 簡介

Broadcast Channel API 可以實現(xiàn)同源下瀏覽器不同窗口、Tab 頁或者 iframe 下的瀏覽器上下文之間的簡單通訊。通過創(chuàng)建一個監(jiān)聽某個頻道下的 BroadcastChannel 對象，你可以接收發(fā)送給該頻道的所有消息。

(圖片來源 —— https://developer.mozilla.org/zh-CN/docs/Web/API/Broadcast_Channel_API)

了解完 Broadcast Channel API 的作用之后，我們來看一下如何使用它：

 
 
 
 
  
  
  
  
// 創(chuàng)建一個用于廣播的通信通道 
  
  
  
  
const channel = new BroadcastChannel('my_bus'); 
  
  
  
  
 
  
  
  
  
// 在my_bus上發(fā)送消息 
  
  
  
  
channel.postMessage('大家好，我是阿寶哥'); 
  
  
  
  
 
  
  
  
  
// 監(jiān)聽my_bus通道上的消息 
  
  
  
  
channel.onmessage = function(e) { 
  
  
  
  
  console.log('已收到的消息：', e.data); 
  
  
  
  
}; 
  
  
  
  
 
  
  
  
  
// 關(guān)閉通道 
  
  
  
  
channel.close(); 
 
 
 

通過觀察以上示例，我們可以發(fā)現(xiàn) Broadcast Channel API 使用起來還是很簡單的。該 API 除了支持發(fā)送字符串之外，我們還可以發(fā)送其它對象，比如 Blob、File、ArrayBuffer、Array 等對象。另外，需要注意的是，在實際項目中，我們還要考慮它的兼容性：

(圖片來源 —— https://caniuse.com/?search=Broadcast%20Channel%20API)

由上圖可知，在 IE 11 及以下的版本，是不支持 Broadcast Channel API，這時你就可以考慮使用現(xiàn)成的 broadcast-channel-polyfill 或者基于 localStorage 和 storage 事件來實現(xiàn)。

二、Broadcast Channel API 應(yīng)用場景

利用 Broadcast Channel API，我們可以輕易地實現(xiàn)同源頁面間一對多的通信。該 API 的一些使用場景如下：

• 實現(xiàn)同源頁面間數(shù)據(jù)同步;
• 在其它 Tab 頁面中監(jiān)測用戶操作;
• 指導(dǎo) worker 執(zhí)行一個后臺任務(wù);
• 知道用戶何時登錄另一個 window/tab 中的帳戶。

為了讓大家能夠更好地掌握 Broadcast Channel API，阿寶哥以前面 2 個使用場景為例，來介紹一下該 API 的具體應(yīng)用。

2.1 實現(xiàn)同源頁面間數(shù)據(jù)同步

html

 
 
 
 
  
  
  
  
你好， 
  
  
  
  
 
 
 
 

 JS

 
 
 
 
  
  
  
  
const bc = new BroadcastChannel("abao_channel"); 
  
  
  
  
 
  
  
  
  
(() => { 
  
  
  
  
  const title = document.querySelector("#title"); 
  
  
  
  
  const userName = document.querySelector("#userName"); 
  
  
  
  
 
  
  
  
  
  const setTitle = (userName) => { 
  
  
  
  
    title.innerHTML = "你好，" + userName; 
  
  
  
  
  }; 
  
  
  
  
 
  
  
  
  
  bc.onmessage = (messageEvent) => { 
  
  
  
  
    if (messageEvent.data === "update_title") { 
  
  
  
  
      setTitle(localStorage.getItem("title")); 
  
  
  
  
    } 
  
  
  
  
  }; 
  
  
  
  
 
  
  
  
  
  if (localStorage.getItem("title")) { 
  
  
  
  
    setTitle(localStorage.getItem("title")); 
  
  
  
  
  } else { 
  
  
  
  
    setTitle("請告訴我們你的用戶名"); 
  
  
  
  
  } 
  
  
  
  
 
  
  
  
  
  userName.onchange = (e) => { 
  
  
  
  
    const inputValue = e.target.value; 
  
  
  
  
    localStorage.setItem("title", inputValue); 
  
  
  
  
    setTitle(inputValue); 
  
  
  
  
    bc.postMessage("update_title"); 
  
  
  
  
  }; 
  
  
  
  
})(); 
 
 
 

在以上示例中，我們實現(xiàn)了同源頁面間的數(shù)據(jù)同步。當(dāng)任何一個已打開的頁面中，輸入框的數(shù)據(jù)發(fā)生變化時，頁面中的 h3#title 元素的內(nèi)容將會自動實現(xiàn)同步更新。

2.2 在其它 Tab 頁面中監(jiān)測用戶操作

利用 Broadcast Channel API，除了可以實現(xiàn)同源頁面間的數(shù)據(jù)同步之外，我們還可以利用它來實現(xiàn)在其它 Tab 頁面中監(jiān)測用戶操作的功能。比如，當(dāng)用戶在任何一個 Tab 中執(zhí)行退出操作后，其它已打開的 Tab 頁面也能夠自動實現(xiàn)退出，從而保證系統(tǒng)的安全性。

html

 
 
 
 
  
  
  
  
當(dāng)前狀態(tài)：已登錄 
  
  
  
  
退出 
 
 
 

 JS

 
 
 
 
  
  
  
  
const status = document.querySelector("#status"); 
  
  
  
  
const logoutChannel = new BroadcastChannel("logout_channel"); 
  
  
  
  
 
  
  
  
  
logoutChannel.onmessage = function (e) { 
  
  
  
  
  if (e.data.cmd === "logout") { 
  
  
  
  
    doLogout(); 
  
  
  
  
  } 
  
  
  
  
}; 
  
  
  
  
 
  
  
  
  
function logout() { 
  
  
  
  
  doLogout(); 
  
  
  
  
  logoutChannel.postMessage({ cmd: "logout", user: "阿寶哥" }); 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
function doLogout() { 
  
  
  
  
  status.innerText = "當(dāng)前狀態(tài)：已退出"; 
  
  
  
  
} 
 
 
 

在以上示例中，當(dāng)用戶點擊退出按鈕后，當(dāng)前頁面會執(zhí)行退出操作，同時會通過 logoutChannel 通知其它已打開的頁面執(zhí)行退出操作。

三、Broadcast Channel API vs postMessage API

與 postMessage() 不同的是，你不再需要維護對 iframe 或 worker 的引用才能與其進行通信：

 
 
 
 
  
  
  
  
const popup = window.open('https://another-origin.com', ...); 
  
  
  
  
popup.postMessage('Sup popup!', 'https://another-origin.com'); 
 
 
 

Broadcast Channel API 只能用于實現(xiàn)同源下瀏覽器不同窗口、Tab 頁或者 iframe 下的瀏覽器上下文之間的簡單通訊。而 postMessage API 卻可用于實現(xiàn)不同源之間消息通信。由于保證消息來自同一來源，因此無需像以前那樣使用以下方法來驗證消息：

 
 
 
 
  
  
  
  
const iframe = document.querySelector('iframe'); 
  
  
  
  
iframe.contentWindow.onmessage = function(e) { 
  
  
  
  
  if (e.origin !== 'https://expected-origin.com') { 
  
  
  
  
    return; 
  
  
  
  
  } 
  
  
  
  
  e.source.postMessage('Ack!', e.origin); 
  
  
  
  
}; 
 
 
 

 四、總結(jié)

Broadcast Channel API 是一個非常簡單的 API，內(nèi)部包含了跨上下文通訊的接口。在支持該 API 的瀏覽器中，我們可以利用該 API 輕松地實現(xiàn)同源頁面間的通信。而對于不支持該 API 的瀏覽器來說，我們就可以考慮使用 localStorage 和 storage 事件來解決同源頁面間通信的問題。

五、參考資源

• MDN - Broadcast Channel API
• BroadcastChannel API: A Message Bus for the Web

網(wǎng)站標(biāo)題：JavaScript 如何實現(xiàn)同源通信?
文章網(wǎng)址：http://www.dlmjj.cn/article/cdodceh.html