實現兩個窗口通訊方法－postMessage - JavaShuo

postMessage

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

message 的一些屬性

data:從其餘 window 中傳遞過來的對象。
origin:調用 postMessage 時消息發送方窗口的 origin . 這個字符串由協議、「://「、域名、「 : 端口號」拼接而成。例如「https://example.org (implying port 443)」、「http://example.net (implying port 80)」、「http://example.com:8080」。請注意，這個origin不能保證是該窗口的當前或將來origin，由於postMessage被調用後可能被導航到不一樣的位置。
source:對發送消息的窗口對象的引用; 您可使用此來在具備不一樣origin的兩個窗口之間創建雙向通訊。

實現通訊demo:

// a.com/index.html
<iframe src='b.com/index.html' id='iframe'></iframe>
<script>
    window.onload = function(){
        var iframe = document.getElementById('iframe');
        // 若寫成'http://b.com/c/proxy.html'效果同樣
        // 若寫成'http://c.com'就不會執行postMessage了
        var targetOrigin = 'http://b.com';
        iframe.contentWindow.postMessage('data to send',targetOrigin);
    }
</script>
// b.com/index.html
<script type="text/javascript">
  window.addEventListener('message',function(event){
    // 經過origin屬性判斷消息來源地址
    if(event.origin == 'http://a.com'){
      console.log(event.data);
      console.log(event.source);
    }
  },false);
</script>