seo优化| 运维百科| 网站建设技术| 网页设计技术| 网页设计教程| html及CSS教程|

HTML5 window/iframe跨域传递消息 API介绍

人浏览  发布时间:2021-01-20

window.postMessage允许多个 window/frame之间跨域传递数据和信息。下面为大家介绍下window.postMessage的工作原理,以及如何在FireFox,IE8+,Opera,Safari和Chrome中使用它 原文地址: HTML5s window.postMessage API 在线示例: Using HTML5s window.postMessage (请...
window.postMessage允许多个 window/frame之间跨域传递数据和信息。下面为大家介绍下window.postMessage的工作原理,以及如何在FireFox,IE8+,Opera,Safari和Chrome中使用它
原文地址:HTML5′s window.postMessage API 
在线示例:Using HTML5's window.postMessage(请打开控制台看日志) 

我写了一个 MooTools 的插件"PostMessager"来封装window.postMessage,你可以点击这里下载! 

HTML5 的 window.postMessage 接口API 还没有多少人了解。 window.postMessage允许多个 window/frame之间跨域传递数据和信息。实质上window.postMessage扮演了一个跨域Ajax请求的角色,当然,并不需要远程服务器来协作。接下来将介绍window.postMessage的工作原理,以及如何在FireFox,IE8+,Opera,Safari和Chrome中使用它. 

一、消息发送端 
整个过程的第一步,是设定一个"消息源"。通过这个消息源,我们可以往新打开的window(或者iframe)发送window级别的数据(消息)。在下面的示例中,给新窗口发送消息的频率是每6秒一次,并设置事件监听来处理目标window返回的响应信息。 

复制代码
代码如下:

function trace(message){ 
var infos = Array.prototype.slice.call(arguments,0).join(" "); 
if("console" in window){ 
console.log(infos); 
} else { 
alert(infos); 

}; 
// 创建弹出窗口 
var domain = 'http://scriptandstyle.com'; 
var myPopup = window.open(domain + '/windowPostMessageListener.html','myWindow'); 
// 定时发送消息 
setInterval(function(){ 
var message = '现在时间: ' + (new Date().getTime()); 
trace('数据源.发送的消息: ' + message); 
myPopup.postMessage(message,domain); //发送数据信息,并设置目标URI 
},6*1000); 
function bindEvent(target,noOnEventName,handler){ 
if(window.addEventListener){ 
target.addEventListener(noOnEventName,handler); 
} else if(window.attachEvent){ 
// IE 的监听设置函数是attachEvent 
target.attachEvent("on"+noOnEventName,handler); 
} else { 
target["on"+noOnEventName]=handler; 

}; 
// 监听收到的信息. 
bindEvent(window,'message',function(event) { 
// 只接收特定域的消息 
if(event.origin !== 'http://scriptandstyle.com') return; 
trace('收到的响应信息: ',event.data); 
},false); 

原文作者使用的是window.addEventListener方法来绑定事件,但是在IE下将会报错(IE是window.attachEvent).当然,你可以创建函数来包装事件,或者使用现成的类库,比如MooTools或者jQuery/dojo来实现。 
在上面的示例中,如果新窗口打开正常,那我们可以通过window对象的引用myPopup发送消息,并指定必须匹配的URI(协议、主机名、端口号)(如果用户在子窗口中跳到其他页面,则消息将不会发送). 
同样我们也绑定了事件处理函数来接收消息message。在此提醒,校验message事件的origin(源)属性很重要,因为可能接收到所有URI发给自己的消息,在多个frame交互时才不至于混淆。 校验过origin之后,如何处理此消息,取决于你具体的业务和需求。 

如果使用iframe的话,那么代码如下: 

复制代码
代码如下:

// 同样创建另一个window(iframe,frame,frameset,top,window这些都属于window相关的对象。) 
var domain = 'http://scriptandstyle.com'; 
var iframe = document.getElementById('myIFrame').contentWindow; 
// 循环发送消息,当然,也可以采用事件驱动之类的。。。 
setInterval(function(){ 
var message = '现在时间: ' + (new Date().getTime()); 
trace('数据源.发送的消息: ' + message); 
iframe.postMessage(message,domain); //发送数据信息,并设置目标URI 
},6*1000); 

确保能访问到iframe对象的contentWindow 属性——而不仅仅是iframe对象。 

二、消息接收端 
整个流程的第二步就是让目标window就绪。目的窗口所要做的,就是监听message事件,当然也要验证事件的origin消息源。再次提醒:message事件处理函数可以接受任何域名发给他的消息,所以验证origin以及只处理信任列表的message非常重要。 

复制代码
代码如下:

// 监听收到的信息. 
bindEvent(window,'message',function(event) { 
// 只接收特定域的消息 
if(event.origin !== 'http://davidwalsh.name') return; 
trace('监听到信息: ',event.data); 
// 回复消息 
event.source.postMessage(""你好,小伙伴们,我已经收到消息了,event.origin); 
},false); 

上面的示例回复了响应信息给请求方。 
message事件重要的属性有: 
source - 发送message的window/iframe对象 
origin - 对应着发送消息window的URI (protocol, domain, and port, 如果有指定的话) 
data - 具体的数据信息 
对于消息系统以及校验来说,这三个对象是必不可少的。 

window.postMessage 使用注意事项 
就和其他所有的Web技术一样,如果使用不当(没有验证事件源)那危险性是显而易见的。当然,安全性由你自己来保证。 
window.postMessage 很像JavaScript技术中的PHP(哈哈,小广告!).window.postMessage 算是一种很酷炫的技术,你觉得呢? (编辑:360度神搜网)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:陕西省西安市,长乐西路180号 WebDesign ©2012 Corporation 360°神搜网网络科技传媒技术服务工作室 网站地图