HTML5 postMessage 跨域通訊 跨視窗訊息傳遞解決方案

HTML5 postMessage 跨域通訊

之前簡單講解了利用script標籤（jsonp）以及iframe標籤（window.name、location.hash）來跨域交換資料，今天我們來學習一下HTML5的api，利用postMessage來跨域交換資料。和前面一些方式交換資料方式不同的是，利用postMessage不能和服務端交換資料，只能在兩個視窗（iframe）之間交換資料，廢話不多說，我們直接進入實戰。

實戰postMessage


    overview

　　上文中說，postMessage是用於兩個視窗（iframe）之間交換資料的，如果我們同時開啟著百度和Google兩個頁面，是不是說這兩者之間就可以通訊了？No，no，no，事實並非如此，就算百度和Google倆頁面有通訊的意願也不行。兩個視窗能通訊的前提是，一個視窗以iframe的形式存在於另一個視窗，或者一個視窗是從另一個視窗通過window.open()或者超連結的形式開啟的（同樣可以用window.opener擷取源視窗）；換句話說，你要交換資料，必須能擷取目標視窗(target window)的引用，不然兩個視窗之間毫無聯絡，想通訊也無能為力。

　　既然是H5家族的，我們也得觀望下它被廣大瀏覽器的接受程度，可以看到接受程度還是相當高的：

而postMessage的使用方式也相當簡單：

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

　　otherWindow是對接收方視窗的引用，一般可以是以下幾種方式：

window.frames[0].postMessage
document.getElementsByTagName('iframe')[0].contentWindow
window.opener.postMessage
event.source.postMessage
window.open 返回的引用
...

　　而message顧名思義就是發送的資料內容，支援字串、數字、json等幾乎所有形式的資料（詳見The structured clone algorithm）

　　targetOrigin是接收方的URI（協議+主機+連接埠），也可以是url形式，但之後的內容（形如xx.html）會自動忽略；用萬用字元*可以指定所有域，但是切記不要用（for security）。

　　transfer可省略，沒看懂是啥意思...以後有需要的時候再研究

　而接受方視窗一般監聽message事件，詳見下面的例子。

    window <-> iframe

　　假設index頁面有個iframe（不同源），我們要給iframe發送資料，而iframe得到資料後也發送資料給top window，表示“我"得到資料了。直接看源碼（思考如何發送and如何接收）：

<!-- http://localhost:81/fish/index.html --><script type="text/javascript">  // 頁面載入完後才能擷取dom節點（iframe）  window.onload = function(){    // 向目標源發送資料    document.getElementsByTagName('iframe')[0].contentWindow.postMessage({"age":10}, 'http://localhost:8080');  };  // 監聽有沒有資料發送過來  window.addEventListener('message', function(e) {      console.log(e);  });</script><iframe src="http://localhost:8080/index.html"></iframe>

<!-- http://localhost:8080/index.html --><script type="text/javascript">  // 監聽有沒有資料發送過來  window.addEventListener('message', function(e){      // 判斷資料發送方是否是可靠的地址      if(e.origin !== 'http://localhost:81')        return;    // 列印資料格式    console.log(e);    // 回傳資料    e.source.postMessage('hello world', e.origin);  }, false);</script>

　　我們截圖看看列印的東西究竟長什麼樣（index頁面傳給iframe的資料）：

　　紅框標出的是三個最重要的屬性，data顧名思義就是傳輸的資料了；origin就是發送訊息視窗的源(URI 協議+主機+連接埠）；而source就能引用發送訊息的視窗對象（可以用它來引用發送視窗進行訊息回傳）。

　  在訊息接收端監聽可以監聽message事件（代碼如上），當然如果要相容坑爹的ie肯定要用attachEvent。這裡不推薦使用window.onmessage，相容性不大好（比如不能相容低版本ff）。

    window <-> window

　　說完了跟同一頁面中的iframe的資料交換，再來說說兩個視窗之間的資料交換。我們知道用window.open()可以開啟一個新的視窗，而如果兩個視窗同源，則兩個視窗的通訊將會非常簡單，我們可以通過window.opener.functionName在新視窗中調用原來視窗的方法（和變數）。但是如果兩個視窗不同源，這樣的操作將會變得很艱難，幸運的是H5給我們提供了postMessage，使得window.opener.postMessage()不會報錯！demo很簡單：

<!-- http://localhost:81/fish/index.html --><script type="text/javascript">  // 開啟一個新的視窗  var popup = window.open('http://localhost:8080/index.html');  /// When the popup has fully loaded, if not blocked by a popup blocker:  setTimeout(function() {      // 當前視窗向目標源傳資料    popup.postMessage({"age":10}, 'http://localhost:8080');  }, 1000);</script>

<!-- http://localhost:8080/index.html --><script type="text/javascript">   // 設定監聽，如果有資料傳過來，則列印  window.addEventListener('message', function(e) {    console.log(e);    // console.log(e.source === window.opener);  // true  });</script>

　　這裡要設定一個定時器的原因是向目標視窗發送資料必須等目標視窗完全載入完，也就是說要在目標視窗中先設定好“監聽器”，發送視窗發的資料才能被監聽到，所以給了個定時器delay，而因為載入時間的不確定所以定時器的delay值也不能確定；另外一個可行的辦法是當目標頁面載入完後，發個訊息個源頁面（postMessage），而源頁面收到訊息，再用postMessage發送訊息給目標頁面。

安全顧慮

　　提到跨域交換資料，條件反射都會問一句，安全嗎？對於postMessage，答案是肯定的。

　　postMessage採用的是“雙向安全機制”。發送方發送資料的時候，會確認接受方的源（所以最好不要用*），而接受方監聽到message事件後，也可以用event.origin判斷是否來自於正確可靠的發送方。



html5 postMessage解決跨域、跨視窗訊息傳遞

平時做web開發的時候關於訊息傳遞，除了用戶端與伺服器傳值還有幾個經常會遇到的問題

1.頁面和其開啟的新視窗的資料傳遞
2.多視窗之間訊息傳遞
3.頁面與嵌套的iframe訊息傳遞
4.上面三個問題的跨域資料傳遞

postMessage()

這些問題都有一些解決辦法，但html5引入的message的API可以更方便、有效、安全的解決這些難題。postMessage()方法允許來自不同源的指令碼採用非同步方式進行有限的通訊，可以實現跨文本檔、多視窗、跨域訊息傳遞。

postMessage(data,origin)方法接受兩個參數

 1.data:要傳遞的資料，html5規範中提到該參數可以是JavaScript的任意基本類型或可複製的對象，然而並不是所有瀏覽器都做到了這點兒，部分瀏覽器只能處理字串參數，所以我們在傳遞參數的時候需要使用JSON.stringify()方法對對象參數序列化，在低版本IE中引用json2.js可以實作類別似效果。

2.origin：字串參數，指明目標視窗的源，協議+主機+連接埠號碼[+URL]，URL會被忽略，所以可以不寫，這個參數是為了安全考慮，postMessage()方法只會將message傳遞給指定視窗，當然如果願意也可以建參數設定為"*"，這樣可以傳遞給任意視窗，如果要指定和當前視窗同源的話設定為"/"。

http://test.com/index.html

<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">        <div id="color">Frame Color</div>    </div>    <div>        <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>    </div>

 

我們可以在http://test.com/index.html通過postMessage()方法向跨域的iframe頁面http://lsLib.com/lsLib.html傳遞訊息

window.onload=function(){            window.frames[0].postMessage('getcolor','http://lslib.com');        }

接收訊息

test.com上面的頁面向lslib.com發送了訊息，那麼在lslib.com頁面上如何接收訊息呢，監聽window的message事件就可以

http://lslib.com/lslib.html

window.addEventListener('message',function(e){                if(e.source!=window.parent) return;                var color=container.style.backgroundColor;                window.parent.postMessage(color,'*');            },false);

 

這樣我們就可以接收任何視窗傳遞來的訊息了，為了安全起見，我們利用這時候的MessageEvent對象判斷了一下訊息源,MessageEvent是一個這樣的東東

有幾個重要屬性

    data：顧名思義，是傳遞來的message
    source：發送訊息的視窗對象
    origin：發送訊息視窗的源（協議+主機+連接埠號碼）

這樣就可以接收跨域的訊息了，我們還可以發送訊息回去，方法類似

簡單的demo

在這個例子中，左邊的div會根據右邊iframe內div顏色變化而變化
  

<!DOCTYPE html><html><head>    <title>Post Message</title></head><body>    <div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">        <div id="color">Frame Color</div>    </div>    <div>        <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>    </div>    <script type="text/javascript">        window.onload=function(){            window.frames[0].postMessage('getcolor','http://lslib.com');        }        window.addEventListener('message',function(e){            var color=e.data;            document.getElementById('color').style.backgroundColor=color;        },false);    </script></body></html>

<!doctype html><html>    <head>        <style type="text/css">            html,body{                height:100%;                margin:0px;            }        </style>    </head>    <body style="height:100%;">        <div id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">            click to change color        </div>        <script type="text/javascript">            var container=document.getElementById('container');            window.addEventListener('message',function(e){                if(e.source!=window.parent) return;                var color=container.style.backgroundColor;                window.parent.postMessage(color,'*');            },false);            function changeColor () {                            var color=container.style.backgroundColor;                if(color=='rgb(204, 102, 0)'){                    color='rgb(204, 204, 0)';                }else{                    color='rgb(204,102,0)';                }                container.style.backgroundColor=color;                window.parent.postMessage(color,'*');            }        </script>    </body></html>

在例子中頁面載入的時候首頁面向iframe發送’getColor‘ 請求（參數沒實際用處）

window.onload=function(){            window.frames[0].postMessage('getcolor','http://lslib.com');        }

 
iframe接收訊息，並把使用中色彩發送給首頁面呢

window.addEventListener('message',function(e){                if(e.source!=window.parent) return;                var color=container.style.backgroundColor;                window.parent.postMessage(color,'*');            },false);

 

首頁面接收訊息，更改自己div顏色

window.addEventListener('message',function(e){            var color=e.data;            document.getElementById('color').style.backgroundColor=color;        },false);

 

當點擊iframe事觸發其變色方法，把最新顏色發送給首頁面

function changeColor () {                            var color=container.style.backgroundColor;                if(color=='rgb(204, 102, 0)'){                    color='rgb(204, 204, 0)';                }else{                    color='rgb(204,102,0)';                }                container.style.backgroundColor=color;                window.parent.postMessage(color,'*');            }

首頁面還是利用剛才監聽message事件的程式處理自身變色

window.addEventListener('message',function(e){            var color=e.data;            document.getElementById('color').style.backgroundColor=color;        },false);

 
最後

很簡單的用法卻解決了大問題，據說Facebook已經在使用了，而且這也是html5另一個API——web workers傳遞訊息的方法，那麼它的瀏覽器安全色性怎麼樣呢？所謂瀏覽器安全色性幾乎變成了IE幾開始支援的問題了。。。不過好訊息是跟localStorage一樣，IE8+都支援了，只不過有些瀏覽器的低版本（比如FireFox4.0）並不支援window.onmessage=function(){}這種寫法，所以我麼最好使用事件綁定的寫法，為了相容IE，也要判斷是否支援addEventListener。