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

本文主要是介绍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 
 <section id="wrapper">  
     <header><h1>postMessage （跨域）</h1></header>  
     <article>  
         <form>  
             <p>  
                 <label for="message">给iframe发一个信息：</label><input type="text" name="message" value="son" id="message" />  
                 <input type="submit" />  
             </p>  
         </form>  
         <h4>目标iframe传来的信息：</h4>  
         <p id="test">暂无信息</p>  
             <iframe id="iframe" src="xiebiji.com/works/postmessage/iframe.html"></iframe>  
     </article>  
 </section>  

然后是iframe的HTML代码

[html]  view plain  copy 
 <form>  
     <p>  
         <label for="message">给父窗口发个信息：</label><input type="text" name="message" value="dad" id="message" />  
         <input type="submit" />  
     </p>  
 </form>  
 <p id="test">暂无信息。</p>  

然后是主页面中的JS代码

[javascript]  view plain  copy 
 var win = document.getElementById("iframe").contentWindow;  
 document.querySelector('form').οnsubmit=function(e){  
     win.postMessage(document.getElementById("message").value,"*");  
     if (e.preventDefault){  
         e.preventDefault();  
     }  
     e.returnValue = false;  
 }  

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

然后是iframe中的JS代码

[javascript]  view plain  copy 
 var parentwin = window.parent;  
 window.onmessage=function(e){  
     document.getElementById("test")。innerHTML = e.origin + "say:" + e.data;  
     parentwin.postMessage('HI!你给我发了"<span>'+e.data+'"</span>。',"*");  
 };  