1姨拥、localStorage

一個窗口更新localStorage绅喉，另一個窗口監(jiān)聽window對象的”storage”事件，來實(shí)現(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)
})

2、WebSocket

所有的WebSocket都監(jiān)聽同一個服務(wù)器地址憨奸，利用send發(fā)送消息革屠，利用onmessage獲取消息的變化，不僅能窗口排宰，還能跨瀏覽器似芝，兼容性最佳，只是需要消耗點(diǎn)服務(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) {
 ?// 消費(fèi)消息
 ?console.log(event.data);
}

3、postMessage

借助iframe 或 window.open
回顧一下API

otherWindow.postMessage(message, targetOrigin, [transfer]);

/*
 * A窗口的域名是<http://example.com:8080>盛嘿，以下是A窗口的script標(biāo)簽下的代碼：
 */


var popup = window.open(...popup details...);


// 如果彈出框沒有被阻止且加載完成


// 這行語句沒有發(fā)送信息出去洛巢，即使假設(shè)當(dāng)前頁面沒有改變location（因?yàn)閠argetOrigin設(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)驗(yàn)證了所收到信息的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);

4漓库、cookie + setInterval【差】

在頁面A設(shè)置一個使用 setInterval 定時器不斷刷新，檢查 Cookies 的值是否發(fā)生變化园蝠，如果變化就進(jìn)行刷新的操作渺蒿。

由于 Cookies 是在同域可讀的，所以在頁面 B 審核的時候改變 Cookies 的值彪薛，頁面 A 自然是可以拿到的蘸嘶。

這樣做確實(shí)可以實(shí)現(xiàn)我想要的功能良瞧，但是這樣的方法相當(dāng)浪費(fèi)資源。雖然在這個性能過盛的時代训唱，浪費(fèi)不浪費(fèi)也感覺不出來褥蚯，但是這種實(shí)現(xiàn)方案，確實(shí)不夠優(yōu)雅况增。

5赞庶、SharedWorker

HTML5 中的 Web Worker 可以分為兩種不同線程類型，一個是專用線程 Dedicated Worker澳骤，一個是共享線程 Shared Worker歧强。

6棋枕、直接引用

其實(shí)就是直接獲取對方DOM白修，適用于兩個頁面在同一域；可以傳遞對象數(shù)據(jù)（對象數(shù)據(jù)使用 instanceof 做類型判斷時有坑）重斑；參考 window.open兵睛；
例：

// 父頁面獲取子iframe
document.getElementById('iframe的id').contentWindow.document


// 子iframe獲取父頁面
window.parent.document

7、window.name

瀏覽器窗口有window.name屬性窥浪。這個屬性的最大特點(diǎn)是祖很，無論是否同源，只要在同一個窗口里漾脂，前一個網(wǎng)頁設(shè)置了這個屬性突琳，后一個網(wǎng)頁可以讀取它。

父窗口先打開一個子窗口符相，載入一個不同源的網(wǎng)頁拆融，該網(wǎng)頁將信息寫入window.name屬性。

window.name = data;

接著啊终，子窗口跳回一個與主窗口同域的網(wǎng)址镜豹。

window.location.;

然后，主窗口就可以讀取子窗口的window.name了蓝牲。

var data = document.getElementById('iframe的id').contentWindow.name;

這種方法的優(yōu)點(diǎn)是趟脂，window.name容量很大，可以放置非常長的字符串例衍；缺點(diǎn)是必須監(jiān)聽子窗口window.name屬性的變化昔期，影響網(wǎng)頁性能已卸。

源自：https://segmentfault.com/a/1190000016927268

聲明：文章著作權(quán)歸作者所有，如有侵權(quán)硼一，請聯(lián)系小編刪除累澡。