首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

HTML5 window/iframe跨域传接消息 API

2013-09-05 
HTML5 window/iframe跨域传递消息 API原文地址:HTML5′s window.postMessage API在线示例:Using HTML5s wi

HTML5 window/iframe跨域传递消息 API

原文地址:HTML5′s window.postMessage API
在线示例:Using HTML5's window.postMessage(请打开控制台看日志)
原文日期: 2010年09月03日
翻译日期: 2013年08月24日

我写了一个 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返回的响应信息。

// 监听收到的信息.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 算是一种很酷炫的技术,你觉得呢?

热点排行