h5-postMessage跨域跨窗口消息传递-1.1

看了下postMessage感觉他是在同一个页面，跨域或跨窗口进行消息传输。

第一步，需要设置iframe连接一个外部页面

<span data-wiz-span="data-wiz-span" style="font-family: 楷体;"><div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
    <div id="color">这里就是让你看颜色的</div>
</div>
<div>
    <iframe id="child" src="http://localhost:8089"></iframe>
</div></span>

    js需要在页面加载的时候发送消息，另外需要增加message的监听，设置颜色

window.onload=function(){
    window.frames[0].postMessage('getcolor','http://lslib.com');
}

window.addEventListener('message',function(e){
    var color=e.data;
    document.getElementById('color').style.backgroundColor=color;
},false);

     另一个页面只需要展示颜色，这里为了实现跨域，我把它放在本地iis上，地址是 http://localhost:8089

<span data-wiz-span="data-wiz-span" style="font-family: 楷体;"><div id="container" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">
    click to change color
</div></span>

    js需要增加message的监听，如果信息来源于父级，则发送消息

window.addEventListener('message',function(e){
    if(e.source != window.parent) return;
    var color = document.getElementById('container').style.backgroundColor;
    window.parent.postMessage(color,'*');
},false);

 

 上面是个demo，下面介绍下postMessage。

主要包含两个 API： 消息监听onmessage  消息发送postMessage

 

otherWindow.postMessage(msg,targetOrigin)

    otherWindow为要传送消息的窗体对象，可以是：

        (a)、内联框架iframe的contentWindow属性；

        (b)、通过window.open方法打开的新窗口的window；

        (c)、window.opener（父页面）；

        (d)、通过name或window.frames[i]；

    msg为发送的消息内容，为字符串类型；

    targetOrigin为来源域限制,限制接收窗体的 URL。

 

    获得信息的几种方式

e.data;  //获得数据
e.origin;//获得文档来源，通常是主机号
e.source;//获得消息来源，通常为发送者，用于应答