之前寫過兩篇解決跨文檔消息傳輸的解決方案。其中 一種使用了MessageJS的插件方法，其實MessageJS
這個插件的原理就是使用了HTML5提供的postMessage；
一下講講，postMessage的實際用法以及基本知識：
HTML5提供了在網頁之間互相接受與發送消息的功能；
可以獲取到網頁所在窗口的對象實例，不進同源（域+端口號）的web網頁之間的互相通信，也可以實現跨域通信；
兼容性：
IE8+,
Firefox 3.1+,
Opera 9+,
Safari,
Chrome
首先：想 要接收從其他窗口發過來的消息，就必須對窗口對象進行監聽：
監聽方法：
window.addEventListener("message", function(e){...}, false);發送消息：
/**
* @message:發送的消息文本，可以是數字。字符串，也可以是javascript的對象（通過JSON轉換爲對象文本）；
* @origin:接收消息的對象窗口的URL地址（例如http://1.1.1.1:8080；帶端口號。），這個參數也可以使用
* 通配符"*"，意思是指定發送給全部的地址，這樣的話所有的網頁都能收到你發來的消息，友情提示：
* 不建議這麼用，最好使用指定的URL；該參數發送時，只包括域和端口號；
*/
otherWindow.postMessage(message,origin);案例
以下案例，來說明iframe在使用postMessage跨域傳輸數據；
父頁面和子頁面，在不同的主機上發佈（IP地址不同）
跨域通信 — 主（父）頁面 postParent.html：
<!DOCTYPE html>
<html>
<head>
<title>postMessage：跨域傳輸數據主頁面</title>
</head>
<body>
<div>
<p>接受來自:</p>
<h1 id="h1"></h1>
<p>的消息：</p>
<h1 id="p_text"></h1>
</div>
<iframe width="500px" height="500px" id="iframe"
src="http://1.1.1.1:8080/postMessage/postMessage1.html"
onload="send()">
</iframe>
<script type="text/javascript">
// 窗口事件監聽：監聽message
window.addEventListener("message",function(e){
// e.origin:發送消息的地址，誰發的消息就是誰的
// 接收時候，可以加個判斷;避免接收來源不明的URL發過來的數據
if( e.origin != "http://1.1.1.2:8080" ){
return;
}
document.getElementById("h1").innerHTML = e.origin;
// e.data:發消息的內容
document.getElementById("p_text").innerHTML = e.data;
},false);
// 發消息
function send(){
// 獲取嵌入的iframe
var iframe = window.frames[0],
send_origin = document.getElementById("iframe").getAttribute("src");
iframe.postMessage("我是父頁面的消息---唉呀媽呀",send_origin);
}
</script>
</body>
</html>
跨域通信 — 子（嵌入）頁面 postMessage1.html：
<!DOCTYPE html>
<html>
<head>
<title>postMessage：跨域傳輸數據子頁面</title>
</head>
<body>
<div>
<p>接受來自:</p>
<h1 id="h1"></h1>
<p>的消息：</p>
<h1 id="p_text"></h1>
</div>
<script type="text/javascript">
// 窗口事件監聽：監聽message
window.addEventListener("message",function(e){
// e.origin:發送消息的地址，誰發的消息就是誰的
// 接收時候，可以加個判斷;避免接收來源不明的URL發過來的數據
if( e.origin != "http://1.1.1.1:8080" ){
return;
}
document.getElementById("h1").innerHTML = e.origin;
// e.data:發消息的內容
document.getElementById("p_text").innerHTML = e.data;
// 接收到消息後，在回過去，回個話；
// 通過訪問message的source的屬性，來獲取消息發送源的窗口對象，
// 也就是能知道是誰發的消息，在通過postMessage，給發消息者回個話
e.source.postMessage("我是子頁面的消息---呵呵噠",e.origin);
},false);
</script>
</body>
</html>注意：
1.origin屬性，可以獲取消息的發送源。請注意，發送源與網站的URL地址不是統一概念，發送源只包括域名和端口號。爲；了不接收同其他源發送過來的惡意的亂七八糟的消息，最好對發送源做個檢查；屏蔽掉一些不需要的消息；
2.data屬性，可以得到消息的內容，可以是任何javascript對象；
3.使用postMessage發消息；
4.source屬性，可以獲取消息發送源的窗口代理對象；
結果圖：(實在抱歉測試的時候，用的IP是真的，只能覆蓋了；理解理解！)
以上是整理postMessage跨文檔傳輸消息