关于postMessage - 爱码网

postMessage是html5新增的方法，主要用来解决跨域通信的问题，用法很简单，只需要在页面获得另一个页面的window( 如iframe引入的页面 )，就可以调用postMessage方法将数据传送过去，接收的页面只需要监听message事件，就可以获取到数据，从而进行操作。就是这样而已，下面给出一个例子，看代码会更加清晰。

page1.html

<!DOCTYPE HTML> 
<html lang="zh-cn"> 
<head> 
   <meta charset="gb2312"> 
   <title></title> 
</head> 
<body> 
   <iframe src="http://192.168.50.122/2013/page1.html" ></iframe> 
   <br /> 
   <input type="text"  /> 
   <input type="button"  /> 
  
<script type="text/javascript"> 
var addEvent = function( ele, type, fnHandler ){  
     return ele.addEventListener ? ele.addEventListener(type,fnHandler,false) : ele.attachEvent('on' + type,fnHandler);  
}, 
receive = function( e ){ 
    var div = document.createElement( 'div' ); 
    div.innerHTML = e.data; //postMessage过来的数据都在e对象里，可以输出e查看相应属性 
    document.body.appendChild( div ); 
} 
  
//绑定message事件接收数据 
addEvent( window, 'message', receive ); 
  
/* 上面的为接收子iframe发送过来的数据，下面的为向子iframe发送数据 */ 
  
var ifr = document.getElementById( 'ifr' ), 
    txt = document.getElementById( 'txt' ), 
    btn = document.getElementById( 'btn' ); 
  
btn.onclick = function(){ 
    var value = txt.value; 
  
    ifr.contentWindow.postMessage( value, '*' ); 
  
    txt.value = ''; 
} 
  
</script> 
</body> 
</html>

page2.html

<!DOCTYPE HTML> 
<html lang="zh-cn"> 
<head> 
   <meta charset="gb2312"> 
   <title></title> 
</head> 
<body> 
    <strong>这是子页面</strong> 
   <input type="text"  /> 
   <input type="button"  /> 
   <div ></div> 
  
<script type="text/javascript"> 
var addEvent = function( ele, type, fnHandler ){  
     return ele.addEventListener ? ele.addEventListener(type,fnHandler,false) : ele.attachEvent('on' + type,fnHandler);  
}, 
receive = function( e ){ 
    var div = document.createElement( 'div' ); 
    div.innerHTML = e.data; //postMessage过来的数据都在e对象里，可以输出e查看相应属性 
    document.body.appendChild( div ); 
} 
  
//绑定message事件接收数据 
addEvent( window, 'message', receive ); 
  
/* 上面的为接收子iframe发送过来的数据，下面的为向子iframe发送数据 */ 
  
var ifr = document.getElementById( 'ifr' ), 
   txt = document.getElementById( 'txt' ), 
   btn = document.getElementById( 'btn' ); 
  
btn.onclick = function(){ 
   var value = txt.value; 
  
   window.top.postMessage( value, '*' ); 
  
   txt.value = ''; 
} 
</script> 
</body> 
</html>

运行效果如下图：

关于postMessage

其实只需要看一个页面的代码就能了解全部了，只是为了例子完整性将其全部展示出来了。

可以直接复制上面代码保存在两个页面里做测试，注意自己模拟跨域环境，如改hosts。

参考： https://developer.mozilla.org/zh-CN/docs/DOM/window.postMessage