JavaScript 如何實(shí)現(xiàn)同源通信
一、Broadcast Channel API 簡介
Broadcast Channel API 可以實(shí)現(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 等對象。另外,需要注意的是,在實(shí)際項目中,我們還要考慮它的兼容性:
(圖片來源 —— https://caniuse.com/?search=Broadcast%20Channel%20API)
由上圖可知,在 IE 11 及以下的版本,是不支持 Broadcast Channel API,這時你就可以考慮使用現(xiàn)成的 broadcast-channel-polyfill 或者基于 localStorage 和 storage 事件來實(shí)現(xiàn)。
二、Broadcast Channel API 應(yīng)用場景
利用 Broadcast Channel API,我們可以輕易地實(shí)現(xiàn)同源頁面間一對多的通信。該 API 的一些使用場景如下:
- 實(shí)現(xiàn)同源頁面間數(shù)據(jù)同步;
- 在其它 Tab 頁面中監(jiān)測用戶操作;
- 指導(dǎo) worker 執(zhí)行一個后臺任務(wù);
- 知道用戶何時登錄另一個 window/tab 中的帳戶。
為了讓大家能夠更好地掌握 Broadcast Channel API,阿寶哥以前面 2 個使用場景為例,來介紹一下該 API 的具體應(yīng)用。
2.1 實(shí)現(xiàn)同源頁面間數(shù)據(jù)同步
html
<h3 id="title">你好,</h3> <input id="userName" placeholder="請輸入你的用戶名" />
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"); }; })();
在以上示例中,我們實(shí)現(xiàn)了同源頁面間的數(shù)據(jù)同步。當(dāng)任何一個已打開的頁面中,輸入框的數(shù)據(jù)發(fā)生變化時,頁面中的 h3#title 元素的內(nèi)容將會自動實(shí)現(xiàn)同步更新。
2.2 在其它 Tab 頁面中監(jiān)測用戶操作
利用 Broadcast Channel API,除了可以實(shí)現(xiàn)同源頁面間的數(shù)據(jù)同步之外,我們還可以利用它來實(shí)現(xiàn)在其它 Tab 頁面中監(jiān)測用戶操作的功能。比如,當(dāng)用戶在任何一個 Tab 中執(zhí)行退出操作后,其它已打開的 Tab 頁面也能夠自動實(shí)現(xiàn)退出,從而保證系統(tǒng)的安全性。
html
<h3 id="status">當(dāng)前狀態(tài):已登錄</h3> <button onclick="logout()">退出</button>
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)用戶點(diǎn)擊退出按鈕后,當(dāng)前頁面會執(zhí)行退出操作,同時會通過 logoutChannel 通知其它已打開的頁面執(zhí)行退出操作。
三、Broadcast Channel API vs postMessage API
與 postMessage() 不同的是,你不再需要維護(hù)對 iframe 或 worker 的引用才能與其進(jìn)行通信:
const popup = window.open('https://another-origin.com', ...); popup.postMessage('Sup popup!', 'https://another-origin.com');
Broadcast Channel API 只能用于實(shí)現(xiàn)同源下瀏覽器不同窗口、Tab 頁或者 iframe 下的瀏覽器上下文之間的簡單通訊。而 postMessage API 卻可用于實(shí)現(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 輕松地實(shí)現(xiàn)同源頁面間的通信。而對于不支持該 API 的瀏覽器來說,我們就可以考慮使用 localStorage 和 storage 事件來解決同源頁面間通信的問題。
五、參考資源
MDN - Broadcast Channel API
BroadcastChannel API: A Message Bus for the Web
以上就是JavaScript 如何實(shí)現(xiàn)同源通信的詳細(xì)內(nèi)容,更多關(guān)于JavaScript 同源通信的資料請關(guān)注腳本之家其它相關(guān)文章!
- 詳解JS同源策略和CSRF
- JavaScript同源策略和跨域訪問實(shí)例詳解
- JS實(shí)現(xiàn)的ajax和同源策略(實(shí)例講解)
- js同源策略詳解
- 如何利用js在兩個html窗口間通信
- JavaScript中EventBus實(shí)現(xiàn)對象之間通信
- 淺談vue websocket nodeJS 進(jìn)行實(shí)時通信踩到的坑
- Vue.js組件通信之自定義事件詳解
- SpringBoot實(shí)現(xiàn)jsonp跨域通信的方法示例
- Vue.js子組件向父組件通信的方法實(shí)例代碼詳解
- 在vue中使用SockJS實(shí)現(xiàn)webSocket通信的過程
相關(guān)文章
require導(dǎo)入module.exports 或 exports導(dǎo)出的使用方法
module.exports用于導(dǎo)出整個模塊的內(nèi)容,可以通過賦值給 module.exports 導(dǎo)出一個對象、函數(shù)或值,導(dǎo)出的內(nèi)容可以被其他模塊通過require 導(dǎo)入,本文給大家介紹require導(dǎo)入module.exports 或 exports導(dǎo)出的使用,感興趣的朋友一起看看吧2023-11-11淺談JavaScript超時調(diào)用和間歇調(diào)用
JavaScript是單線程語言,但它允許通過設(shè)置超時值和間歇時間值來調(diào)度代碼在特定的時刻執(zhí)行。前者是在指定的時間過后執(zhí)行代碼,而后者則是每隔指定的時間就執(zhí)行一次代碼。2015-08-08精解window.setTimeout()&window.setInterval()使用方式與參數(shù)傳遞問題!
精解window.setTimeout()&window.setInterval()使用方式與參數(shù)傳遞問題!...2007-11-11JS中注入eval, Function等系統(tǒng)函數(shù)截獲動態(tài)代碼
這篇文章主要介紹了JS中注入eval, Function等系統(tǒng)函數(shù)截獲動態(tài)代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04JS實(shí)現(xiàn)輸入框提示文字點(diǎn)擊時消失效果
這篇文章主要介紹了JS實(shí)現(xiàn)輸入框提示文字點(diǎn)擊時消失效果,涉及javascript針對鼠標(biāo)的響應(yīng)及事件監(jiān)聽機(jī)制相關(guān)技巧,需要的朋友可以參考下2016-07-07JavaScript中???、??=、?.和?||的區(qū)別淺析
在?JS?中,???運(yùn)算符被稱為非空運(yùn)算符,下面這篇文章主要給大家介紹了關(guān)于JavaScript中???、??=、?.和?||區(qū)別的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08