看了下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;//获得消息来源,通常为发送者,用于应答