兩個瀏覽器窗口間通訊總結

兩個瀏覽器窗口間通訊總結

一、localStorage

一個窗口更新localStorage，另外一個窗口監聽window對象的」storage」事件，來實現通訊。
注：兩個頁面要同源（URL的協議、域名和端口相同）

// 本窗口的設值代碼
localStorage.setItem('aaa', (Math.random()*10).toString())

// 其餘窗口監聽storage事件
window.addEventListener("storage", function (e) {
  console.log(e)
  console.log(e.newValue)
})

二、WebSocket

全部的WebSocket都監聽同一個服務器地址，利用send發送消息，利用onmessage獲取消息的變化，不只能窗口，還能跨瀏覽器，兼容性最佳，只是須要消耗點服務器資源。

var ws = new WebSocket("ws://localhost:3000/")
ws.onopen = function (event) {
  // 或者把此方法註冊到其餘事件中，便可與其餘服務器通訊
  ws.send({now : Date.now()}); // 經過服務器中轉消息
};
ws.onmessage = function (event) {
  // 消費消息
  console.log(event.data);
}

三、postMessage

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

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

• otherWindow
  其餘窗口的一個引用，好比iframe的contentWindow屬性、執行window.open返回的窗口對象、或者是命名過或數值索引的window.frames。
• message
  將要發送到其餘 window的數據。它將會被結構化克隆算法序列化。這意味着你能夠不受什麼限制的將數據對象安全的傳送給目標窗口而無需本身序列化。
• targetOrigin
  經過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值能夠是字符串""（表示無限制）或者一個URI。在發送消息的時候，若是目標窗口的協議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值，那麼消息就不會被髮送；只有三者徹底匹配，消息纔會被髮送。這個機制用來控制消息能夠發送到哪些窗口；例如，當用postMessage傳送密碼時，這個參數就顯得尤其重要，必須保證它的值與這條包含密碼的信息的預期接受者的origin屬性徹底一致，來防止密碼被惡意的第三方截獲。若是你明確的知道消息應該發送到哪一個窗口，那麼請始終提供一個有確切值的targetOrigin，而不是。不提供確切的目標將致使數據泄露到任何對數據感興趣的惡意站點。
• transfer 可選
  是一串和message 同時傳遞的 Transferable 對象. 這些對象的全部權將被轉移給消息的接收方，而發送一方將再也不保有全部權。

/*
 * A窗口的域名是<http://example.com:8080>，如下是A窗口的script標籤下的代碼：
 */

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

// 若是彈出框沒有被阻止且加載完成

// 這行語句沒有發送信息出去，即便假設當前頁面沒有改變location（由於targetOrigin設置不對）
popup.postMessage("The user is 'bob' and the password is 'secret'",
                  "https://secure.example.net");

// 假設當前頁面沒有改變location，這條語句會成功添加message到發送隊列中去（targetOrigin設置對了）
popup.postMessage("hello there!", "http://example.org");

function receiveMessage(event)
{
  // 咱們能相信信息的發送者嗎?  (也許這個發送者和咱們最初打開的不是同一個頁面).
  if (event.origin !== "http://example.org")
    return;

  // event.source 是咱們經過window.open打開的彈出頁面 popup
  // event.data 是 popup發送給當前頁面的消息 "hi there yourself!  the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);


/*
 * 彈出頁 popup 域名是<http://example.org>，如下是script標籤中的代碼:
 */

//當A頁面postMessage被調用後，這個function被addEventListenner調用
function receiveMessage(event)
{
  // 咱們能信任信息來源嗎？
  if (event.origin !== "http://example.com:8080")
    return;

  // event.source 就當前彈出頁的來源頁面
  // event.data 是 "hello there!"

  // 假設你已經驗證了所受到信息的origin (任什麼時候候你都應該這樣作), 一個很方便的方式就是把enent.source
  // 做爲回信的對象，而且把event.origin做爲targetOrigin
  event.source.postMessage("hi there yourself!  the secret response " +
                           "is: rheeeeet!",
                           event.origin);
}

window.addEventListener("message", receiveMessage, false);

四、cookie + setInterval【差】

在頁面A設置一個使用 setInterval 定時器不斷刷新，檢查 Cookies 的值是否發生變化，若是變化就進行刷新的操做。

因爲 Cookies 是在同域可讀的，因此在頁面 B 審覈的時候改變 Cookies 的值，頁面 A 天然是能夠拿到的。

這樣作確實能夠實現我想要的功能，可是這樣的方法至關浪費資源。雖然在這個性能過盛的時代，浪費不浪費也感受不出來，可是這種實現方案，確實不夠優雅。

五、SharedWorker

HTML5 中的 Web Worker 能夠分爲兩種不一樣線程類型，一個是專用線程 Dedicated Worker，一個是共享線程 Shared Worker。

• Dedicated Worker直接使用new Worker()便可建立，這種webworker是當前頁面專有的。。
• SharedWorker能夠被多個window、標籤頁、iframe共同使用，但必須保證這些標籤頁都是同源的(相同的協議，主機和端口號)

六、直接引用

其實就是直接獲取對方DOM，適用於兩個頁面在同一域；能夠傳遞對象數據（對象數據使用 instanceof 作類型判斷時有坑）；參考 window.open；
例：

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

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

七、window.name

瀏覽器窗口有window.name屬性。這個屬性的最大特色是，不管是否同源，只要在同一個窗口裏，前一個網頁設置了這個屬性，後一個網頁能夠讀取它。

父窗口先打開一個子窗口，載入一個不一樣源的網頁，該網頁將信息寫入window.name屬性。

window.name = data;

接着，子窗口跳回一個與主窗口同域的網址。

window.location.href = 'http://parent.url.com/xxx.html';

而後，主窗口就能夠讀取子窗口的window.name了。

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

這種方法的優勢是，window.name容量很大，能夠放置很是長的字符串；缺點是必須監聽子窗口window.name屬性的變化，影響網頁性能。