HTML5之window.postMessage API
window.postMessage是一个鲜为人知的HTML5 API。 window.postMessage允许两个窗口/帧之间跨域发送数据消息。从本质上讲,window.postMessage是一个跨域的无服务器垫片的Ajax。让我们一起来看看window.postMessage的例子,以及如何在火狐,IE8+,Opera,Safari和Chrome浏览器中使用它。
第一部分:发送者
程序的第一步是建立一个源,在这个源里面,我们将打开一个窗口(或者是iframe,如果你更喜欢的话),给另外新的窗口发送消息(因为是例子的缘故,我们将每6秒发送一次消息,同时并创建一个事件监听器监听我们收到的从目标窗口任何回应。)
我使用是在IE中无法工作的window.addEventListener方法(IE中window.attachEvent方法)。你可以使用MooTools/jQuery/Dojo库中做了兼容处理的方法。
假设正确的打开了窗口,我们发送消息所指定的URI信息(包括协议,主机名和端口,如果存在的话),必须当时存在(因为用户可能已经改变的随后窗口的地址),如果这个目标窗口不存在,消息将无法发送。
我们还要创建了一个事件处理程序,用于接收消息。这是非常重要的,您必须验证事件起源当接收到一个消息,因为消息处理程序接受来自任何URI的消息!原点一旦通过验证,你可以在任何你喜欢的方式处理所接受到的消息。
使用iframe的时候如下:
必须访问iframe的contentWindow属性——而不是节点本身。
第二部分:目标窗口
程序的第二部分是目标窗口的准备。目标窗口建立“message”事件的事件侦听器,同时应该验证信息的来源。同样的,消息事件接受从任何位置。所以建立一个信任源列表来验证消息源是很重要的。
面的示例代码是目标窗口发送一个消息回应给发送方,确认消息已经收到了。这些事件属性十分重要:
source——发送消息的来源窗口或者iframe
origin——发送消息的URI(包括协议,域名和端口,如果有的话)
data——接受的消息内容
这三个属性对验证消息十分重要。
使用window.postMessage注意
像其他web技术一样,如果使用不当,就会很危险。如果没有验证消息源,它将威胁应用程序的安全。window.postmessage就像JavaScript式的PHP这方面的技术。window.postMessage很酷,不是吗?
【HTML5之window.postMessage API】相关文章
1. HTML5之window.postMessage API
2. HTML5 postMessage 和 onmessage API 详细应用
3. 摩托罗拉系统推出业界首款可基于Windows Embedded Handheld和Windows CE设备框架 ...
5. 釜底抽薪:微软让所有Android和iOS用户在浏览器内也能体验Windows Phone ...
6. Respond.js – 让不懂爱的 IE6-8 支持 CSS3 Media Query
7. 不容错过的window8 metro UI风格的web资源
8. IE10是Windows中最快浏览器 跨平台Chrome更给力
9. 诺基亚将推平板电脑,Windows优先,Android候选
10. 响应式web设计(Responsive web design)三步曲
本文来源:https://www.51html5.com/a707.html
﹝HTML5之window.postMessage API﹞相关内容
- HTML 5离线存储之Web SQL
- George Fox谈Adobe开发者社区与HTML5内容建设
- 使用 Responsive Elements 快速构建响应式网站
- Mozilla发布“BrowserQuest”证明HTML5的功能强大
- 海外复古HTML5新游《BrowserQuest》曝光
- BrowserQuest:开源的基于HTML5的多人在线RPG游戏
- jQuery图片模糊插件crossfade.js_dowebok
- BrowserQuest
- 微软云计算:Windows Azure Marketplace支持HTML5和六国语言
- Windows Phone8显身手,HTML5跑分接近300