您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“怎么實現(xiàn)兩個瀏覽器窗口間通信”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習(xí)“怎么實現(xiàn)兩個瀏覽器窗口間通信”吧!
一個窗口更新localStorage,另一個窗口監(jiān)聽window對象的”storage”事件,來實現(xiàn)通信。
注:兩個頁面要同源(URL的協(xié)議、域名和端口相同)
// 本窗口的設(shè)值代碼 localStorage.setItem('aaa', (Math.random()*10).toString()) // 其他窗口監(jiān)聽storage事件 window.addEventListener("storage", function (e) { console.log(e) console.log(e.newValue) })
所有的WebSocket都監(jiān)聽同一個服務(wù)器地址,利用send發(fā)送消息,利用onmessage獲取消息的變化,不僅能窗口,還能跨瀏覽器,兼容性***,只是需要消耗點服務(wù)器資源。
var ws = new WebSocket("ws://localhost:3000/") ws.onopen = function (event) { // 或者把此方法注冊到其他事件中,即可與其他服務(wù)器通信 ws.send({now : Date.now()}); // 通過服務(wù)器中轉(zhuǎn)消息 }; ws.onmessage = function (event) { // 消費消息 console.log(event.data); }
借助iframe 或 window.open
回顧一下API
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow:
其他窗口的一個引用,比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對象、或者是命名過或數(shù)值索引的window.frames。
message:
將要發(fā)送到其他 window的數(shù)據(jù)。它將會被結(jié)構(gòu)化克隆算法序列化。這意味著你可以不受什么限制的將數(shù)據(jù)對象安全的傳送給目標(biāo)窗口而無需自己序列化。
targetOrigin:
通過窗口的origin屬性來指定哪些窗口能接收到消息事件,其值可以是字符串""(表示***制)或者一個URI。在發(fā)送消息的時候,如果目標(biāo)窗口的協(xié)議、主機(jī)地址或端口這三者的任意一項不匹配targetOrigin提供的值,那么消息就不會被發(fā)送;只有三者完全匹配,消息才會被發(fā)送。這個機(jī)制用來控制消息可以發(fā)送到哪些窗口;例如,當(dāng)用postMessage傳送密碼時,這個參數(shù)就顯得尤為重要,必須保證它的值與這條包含密碼的信息的預(yù)期接受者的origin屬性完全一致,來防止密碼被惡意的第三方截獲。如果你明確的知道消息應(yīng)該發(fā)送到哪個窗口,那么請始終提供一個有確切值的targetOrigin,而不是。不提供確切的目標(biāo)將導(dǎo)致數(shù)據(jù)泄露到任何對數(shù)據(jù)感興趣的惡意站點。
transfer 可選:
是一串和message 同時傳遞的 Transferable 對象. 這些對象的所有權(quán)將被轉(zhuǎn)移給消息的接收方,而發(fā)送一方將不再保有所有權(quán)。
/* * A窗口的域名是<http://example.com:8080>,以下是A窗口的script標(biāo)簽下的代碼: */ var popup = window.open(...popup details...); // 如果彈出框沒有被阻止且加載完成 // 這行語句沒有發(fā)送信息出去,即使假設(shè)當(dāng)前頁面沒有改變location(因為targetOrigin設(shè)置不對) popup.postMessage("The user is 'bob' and the password is 'secret'", "https://secure.example.net"); // 假設(shè)當(dāng)前頁面沒有改變location,這條語句會成功添加message到發(fā)送隊列中去(targetOrigin設(shè)置對了) popup.postMessage("hello there!", "http://example.org"); function receiveMessage(event) { // 我們能相信信息的發(fā)送者嗎? (也許這個發(fā)送者和我們最初打開的不是同一個頁面). if (event.origin !== "http://example.org") return; // event.source 是我們通過window.open打開的彈出頁面 popup // event.data 是 popup發(fā)送給當(dāng)前頁面的消息 "hi there yourself! the secret response is: rheeeeet!" } window.addEventListener("message", receiveMessage, false); /* * 彈出頁 popup 域名是<http://example.org>,以下是script標(biāo)簽中的代碼: */ //當(dāng)A頁面postMessage被調(diào)用后,這個function被addEventListenner調(diào)用 function receiveMessage(event) { // 我們能信任信息來源嗎? if (event.origin !== "http://example.com:8080") return; // event.source 就當(dāng)前彈出頁的來源頁面 // event.data 是 "hello there!" // 假設(shè)你已經(jīng)驗證了所受到信息的origin (任何時候你都應(yīng)該這樣做), 一個很方便的方式就是把enent.source // 作為回信的對象,并且把event.origin作為targetOrigin event.source.postMessage("hi there yourself! the secret response " + "is: rheeeeet!", event.origin); } window.addEventListener("message", receiveMessage, false);
在頁面A設(shè)置一個使用 setInterval 定時器不斷刷新,檢查 Cookies 的值是否發(fā)生變化,如果變化就進(jìn)行刷新的操作。
由于 Cookies 是在同域可讀的,所以在頁面 B 審核的時候改變 Cookies 的值,頁面 A 自然是可以拿到的。
這樣做確實可以實現(xiàn)想要的功能,但是這樣的方法相當(dāng)浪費資源。雖然在這個性能過盛的時代,浪費不浪費也感覺不出來,但是這種實現(xiàn)方案,確實不夠優(yōu)雅。
HTML5 中的 Web Worker 可以分為兩種不同線程類型,一個是專用線程 Dedicated Worker,一個是共享線程 Shared Worker。
Dedicated Worker直接使用new Worker()即可創(chuàng)建,這種webworker是當(dāng)前頁面專有的。。
SharedWorker可以被多個window、標(biāo)簽頁、iframe共同使用,但必須保證這些標(biāo)簽頁都是同源的(相同的協(xié)議,主機(jī)和端口號)
其實就是直接獲取對方DOM,適用于兩個頁面在同一域;可以傳遞對象數(shù)據(jù)(對象數(shù)據(jù)使用 instanceof 做類型判斷時有坑);參考 window.open;
例:
// 父頁面獲取子iframe document.getElementById('iframe的id').contentWindow.document // 子iframe獲取父頁面 window.parent.document
瀏覽器窗口有window.name屬性。這個屬性的***特點是,無論是否同源,只要在同一個窗口里,前一個網(wǎng)頁設(shè)置了這個屬性,后一個網(wǎng)頁可以讀取它。
父窗口先打開一個子窗口,載入一個不同源的網(wǎng)頁,該網(wǎng)頁將信息寫入window.name屬性。
window.name = data;
接著,子窗口跳回一個與主窗口同域的網(wǎng)址。
window.location.href = 'http://parent.url.com/xxx.html';
然后,主窗口就可以讀取子窗口的window.name了。
var data = document.getElementById('iframe的id').contentWindow.name;
這種方法的優(yōu)點是,window.name容量很大,可以放置非常長的字符串;缺點是必須監(jiān)聽子窗口window.name屬性的變化,影響網(wǎng)頁性能。
到此,相信大家對“怎么實現(xiàn)兩個瀏覽器窗口間通信”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。