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').onsubmit=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>。',"*");  

};  

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