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