主頁面 接收訊息：

<#-- 頁頭 -->
<#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程式碼

1. <sectionid="wrapper">
2.     <header><h1>postMessage （跨域）</h1></header>
3.     <article>
4.         <form>
5.             <p>
6.                 <labelfor="message">給iframe發一個資訊：</label><inputtype="text"name="message"value="son"id
   ="message"/>
7.                 <inputtype="submit"/>
8.             </p>
9.         </form>
10.         <h4>目標iframe傳來的資訊：</h4>
11.         <pid="test">暫無資訊</p>
12.             <iframeid="iframe"src="xiebiji.com/works/postmessage/iframe.html"></iframe>
13.     </article>
14. </section>

1. <form>
2.     <p>
3.         <labelfor="message">給父視窗發個資訊：</label><inputtype="text"name="message"value="dad"id="message"/>
4.         <inputtype="submit"/>
5.     </p>
6. </form>
7. <pid="test">暫無資訊。</p>

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. }  

然後是iframe中的JS程式碼

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. };