不同域名下的文档因为安全问题，不允许相互之间文档的访问，但是有的时候却不得不需要这样的操作。因此我们一般可以采用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之类浏览器，则还是考虑之前说的那几种跨域处理方式吧