HTML5 postMessage解决跨域、跨iframe窗口消息传递

主页面 接收消息：

<#-- 页头 --><#assign pageTitle><@spring.message "secure.video.sidebar.videograb"/></#assign><#assign currentNav="video"><#include "/secure/commons/header.ftl"><#-- 导入macros --><#include "/commons/macros.ftl"><div class="container-fluid">  <div class="row">    <#-- 左侧栏 -->    <#assign sidebarNav="videoGrab">    <#include "/secure/commons/sidebar-video.ftl">           <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">      <h3 class="page-header"><@spring.message "secure.video.sidebar.videograb"/></h3>      <iframe src="http://grab.polyv.net/grab/login?userId=${userid!''}&ts=${ts!''}&sign=${sign!''}" id="grabvideo" frameborder="0" scrolling="no" width="100%" height="100%" ></iframe>                       </div>       </div></div> <script src="/assets/js/libs/jquery/jquery-1.11.1.min.js"></script><script>$(function(){      //接收 子页面的通信信息      window.addEventListener('message',function(e){          var height=e.data;          console.log(height);          $('#grabvideo').css("height",height+100);       },false);});</script><#-- 页脚 --><#include "/secure/commons/footer.ftl">

iframe子页面 发送消息: （将本页面的body高度，发送到父页面）

<script src="/resources/js/jquery-1.7.2.js"></script><script type="text/javascript">$(".container").css({    'margin-top' : '-55px','width' : '95%'});//向polyv的父iframe页面传递高度$(function(){    var height=3000;    height=$(document.body).height();    window.parent.postMessage(height,"*");});    </script>

参考文档：

先是主页面HTML代码

[html] view plain copy

1. <section id="wrapper">  
2.     <header><h1>postMessage （跨域）</h1></header>  
3.     <article>  
4.         <form>  
5.             <p>  
6.                 <label for="message">给iframe发一个信息：</label><input type="text" name="message" value="son" id="message" />  
7.                 <input type="submit" />  
8.             </p>  
9.         </form>  
10.         <h4>目标iframe传来的信息：</h4>  
11.         <p id="test">暂无信息</p>  
12.             <iframe id="iframe" src="xiebiji.com/works/postmessage/iframe.html"></iframe>  
13.     </article>  
14. </section>  

然后是iframe的HTML代码

[html] view plain copy

1. <form>  
2.     <p>  
3.         <label for="message">给父窗口发个信息：</label><input type="text" name="message" value="dad" id="message" />  
4.         <input type="submit" />  
5.     </p>  
6. </form>  
7. <p id="test">暂无信息。</p>  

然后是主页面中的JS代码

[javascript] view plain copy

1. var win = document.getElementById("iframe").contentWindow;  
2. document.querySelector('form').onsubmit=function(e){  
3.     win.postMessage(document.getElementById("message").value,"*");  
4.     if (e.preventDefault){  
5.         e.preventDefault();  
6.     }  
7.     e.returnValue = false;  
8. }  

关键代码就一句：win.postMessage(document.getElementById("message").value,"*");
postMessage是通信对象的一个方法，所以向iframe通信，就是iframe对象调用postMessage方法。postMessage有两个参数，缺一不可。第一个参数是要传递的数据，第二个参数是允许通信的域，“*”代表不对访问的域进行判断，可理解为允许所有域的通信。

然后是iframe中的JS代码

[javascript] view plain copy

1. var parentwin = window.parent;  
2. window.onmessage=function(e){  
3.     document.getElementById("test")。innerHTML = e.origin + "say:" + e.data;  
4.     parentwin.postMessage('HI!你给我发了"<span>'+e.data+'"</span>。',"*");  
5. };  

注：e.data包含传送过来的数据，e.origin指代源域