不同域名下的文檔因為安全問題，不允許相互之間文檔的訪問，但是有的時候卻不得不需要這樣的操作。因此我們一般可以采用window.name，hash，或者jsonp來實現跨域訪問。
不過自從html5出來以后，我們又可以多一種實現方式了postMessage，下面就是一個最簡單的消息傳遞的例子，我們要實現的功能是將page1頁面中的內容，發送到不同域名下的page2頁面，然后page2將對應消息內容展示出來。
圖片效果
首先我們需要兩個頁面，然后必須分別位於不同的域名下，當然本機肯定要有一個web服務器，接下來就通過修改host來實現不同域名訪問
主頁http://www.postmessage1.com/page1.html 里面嵌套一個iframe框架
<!
DOCTYPE html
>
< html >
< head >
< script type ="text/javascript" >
window.onload = function (){
var iframeWindow = document.getElementById( ' frame1 ' ).contentWindow;
document.getElementById( ' send ' ).onclick = function (){
// 獲取要發送給框架頁面的消息
var value = document.getElementById( ' text1 ' ).value;
// postMessage第一個參數為發送的內容
// 第二個參數為要要傳送的目的地，當然如果不限於任何域名的話可以填*字符，以表示全部
iframeWindow.postMessage(value, ' http://www.postmessage2.com ' );
}
}
</ script >
</ head >
< body >
< iframe id ="frame1" name ="frame1" src ="http://www.postmessage2.com/page2.html" ></ iframe >
< input type ="text" id ="text1" value ="" />
< input type ="button" id ="send" value ="發送" />
</ body >
</ html >
< html >
< head >
< script type ="text/javascript" >
window.onload = function (){
var iframeWindow = document.getElementById( ' frame1 ' ).contentWindow;
document.getElementById( ' send ' ).onclick = function (){
// 獲取要發送給框架頁面的消息
var value = document.getElementById( ' text1 ' ).value;
// postMessage第一個參數為發送的內容
// 第二個參數為要要傳送的目的地，當然如果不限於任何域名的話可以填*字符，以表示全部
iframeWindow.postMessage(value, ' http://www.postmessage2.com ' );
}
}
</ script >
</ head >
< body >
< iframe id ="frame1" name ="frame1" src ="http://www.postmessage2.com/page2.html" ></ iframe >
< input type ="text" id ="text1" value ="" />
< input type ="button" id ="send" value ="發送" />
</ body >
</ html >
iframe框架的src地址為http://www.postmessage2.com/page2.html
<!
DOCTYPE html
>
< html >
< head >
< script >
window.onload = function (){
function handMessage(event){
event = event || window.event;
// 驗證是否來自預期內的域，如果不是不做處理，這樣也是為了安全方面考慮
if (event.origin === ' http://www.postmessage1.com ' ){
document.getElementById( ' divMessage ' ).innerHTML = event.data;
}
}
// 給window對象綁定message事件處理
if (window.addEventListener){
window.addEventListener( " message " , handMessage, false );
}
else {
window.attachEvent( " onmessage " , handMessage);
}
}
</ script >
</ head >
< body >
我是不同域的iframe頁面，下面是接受到的消息內容
< div id ="divMessage" ></ div >
</ body >
</ html >
< html >
< head >
< script >
window.onload = function (){
function handMessage(event){
event = event || window.event;
// 驗證是否來自預期內的域，如果不是不做處理，這樣也是為了安全方面考慮
if (event.origin === ' http://www.postmessage1.com ' ){
document.getElementById( ' divMessage ' ).innerHTML = event.data;
}
}
// 給window對象綁定message事件處理
if (window.addEventListener){
window.addEventListener( " message " , handMessage, false );
}
else {
window.attachEvent( " onmessage " , handMessage);
}
}
</ script >
</ head >
< body >
我是不同域的iframe頁面，下面是接受到的消息內容
< div id ="divMessage" ></ div >
</ body >
</ html >
這樣當點擊send按鈕的時候，就能把page1.html文本框中的消息傳遞到page2.html頁面中了
目前postMessage大部分的主流瀏覽器都兼容了，IE6,IE7除外，如果是針對國外的網站基本不用這兩個了所以放心使用吧，如果是國內要考慮這兩者瀏覽器或者以這兩者為內核的360之類瀏覽器，則還是考慮之前說的那幾種跨域處理方式吧