HTML5实战与剖析之跨文档消息传递(iframe传递信息)
2014-02-20 08:41
447 查看
在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM。如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum域名中的页面通信。在XDM机制出现之前,要毫无压力地实现这种通信需要用很长时间。XDM把这种机制规范化,让咱们能够既稳妥又简单地实现跨文档通信。
XDM的核心是postMessage()方法。对于XDM而言,”另一个地方”指的是包含在当前页面中的iframe标签,或者有当前页面弹出的窗口。
postMessage()方法接收两个参数:一条消息和一个表示消息接受来自哪个域名的字符串。第二个参数对保障安全通信非常重要,可以防止浏览器把消息发送到不安全的地方。小例子如下
HTML代码
JavaScript代码
JavaScript代码中的最后一行代码尝试向内嵌框架中发送一条消息,并制定框架中的文档必须来源于”http://blog.csdn.net/lee_magnum”域。如果来源匹配,消息会传递到内嵌框架中,否则,postMessage()什么也不做。这一限制可以避免窗口中的位置在一些情况下发生改变。如果传给postMessage()的第二个参数是”*”,则表示可以把消息发送给来自任何域的文档。
接收到XDM消息的时候,会触发window对象的message事件。这个事件是以异步形式触发的,所以从发送消息到接收消息(触发接收窗口的message事件)可能要经过一段事件的延迟。触发message事件后,传递给onmessage处理程序的事件对象包含以下三方面的重要信息。
data:作为postMessage()方法第一个参数传入的字符串数据
origin:发送消息的文档所在的域,如”http://blog.csdn.net/lee_magnum”
source:发送消息的文档的window对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用postMessage()方法。如果发送消息的窗口来自同一个域名,那么这个对象就是window。
接收到消息后验证发送窗口的来源是非常有必要的。就像给postMessage()方法指定第二个参数,来确保浏览器不会把消息发送给未知页面一样,在onmessage()方法处理程序中检测消息来源可以确保传入的消息来自已知的页面。基本的检测模式如下
JavaScript代码
Event.Source大多数情况下只是window对象的代理,不是实际的window对象。也就是说不能通过这个event.Source代理对象访问window对象的其他任何信息。只能通过event.Source代理调用postMessage()方法。
XDM还有一个奇怪之处。首先,postMessage()的第一个参数最早是作为”永远都是字符串”来实现的。但后来这个参数的定义改了,改成允许传入任何数据结构。但是并非所有浏览器都实现了这个变化。所以保险起见,使用postMessage()方法的时候,最好只传字符串。如果你想传入结构化的数据,最好选择先在要传入的数据上调用JSON.stringify(),通过postMessage()方法传入得到的字符串,然后再在onmessage事件处理程序中调用JSON.parse()方法。
支持XDM的浏览器有Opera、IE8+、Safari 4+、Firefox 3.5+、Chrome、Android版Webkit和iOS版Safari。更多有关XDM的小东东可以去XDM官方页面去学习参考。XDM的官方页面是http://dev.w3.org/html5/postmsg/
HTML5实战与剖析之跨文档消息传递(iframe传递信息)的相关知识就为大家介绍到这里了,更多有关HTML5的相关东东还请关注梦龙小站的相关更新。
XDM的核心是postMessage()方法。对于XDM而言,”另一个地方”指的是包含在当前页面中的iframe标签,或者有当前页面弹出的窗口。
postMessage()方法接收两个参数:一条消息和一个表示消息接受来自哪个域名的字符串。第二个参数对保障安全通信非常重要,可以防止浏览器把消息发送到不安全的地方。小例子如下
HTML代码
<iframe id="iframe" src="http://blog.csdn.net/lee_magnum" frameborder="0"></iframe>
JavaScript代码
//获取框架中的window var iframeWin = document.getElementById("iframe").contentWindow; alert(iframeWin) // [object window] //向框架中发送消息 iframeWin.postMessage("一个消息", "http://blog.csdn.net/lee_magnum")
JavaScript代码中的最后一行代码尝试向内嵌框架中发送一条消息,并制定框架中的文档必须来源于”http://blog.csdn.net/lee_magnum”域。如果来源匹配,消息会传递到内嵌框架中,否则,postMessage()什么也不做。这一限制可以避免窗口中的位置在一些情况下发生改变。如果传给postMessage()的第二个参数是”*”,则表示可以把消息发送给来自任何域的文档。
接收到XDM消息的时候,会触发window对象的message事件。这个事件是以异步形式触发的,所以从发送消息到接收消息(触发接收窗口的message事件)可能要经过一段事件的延迟。触发message事件后,传递给onmessage处理程序的事件对象包含以下三方面的重要信息。
data:作为postMessage()方法第一个参数传入的字符串数据
origin:发送消息的文档所在的域,如”http://blog.csdn.net/lee_magnum”
source:发送消息的文档的window对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用postMessage()方法。如果发送消息的窗口来自同一个域名,那么这个对象就是window。
接收到消息后验证发送窗口的来源是非常有必要的。就像给postMessage()方法指定第二个参数,来确保浏览器不会把消息发送给未知页面一样,在onmessage()方法处理程序中检测消息来源可以确保传入的消息来自已知的页面。基本的检测模式如下
JavaScript代码
window.addEventListener('message',function(event){ //确保发送消息的域名是已知的域名 if(event.origin == "http://blog.csdn.net/lee_magnum"){ //处理接收到的数据 processMessage(event.data); //可选:向来源窗口发送回执 event.source.postMessage("收到了", "http://www.leemagnum.com"); } }, false);
Event.Source大多数情况下只是window对象的代理,不是实际的window对象。也就是说不能通过这个event.Source代理对象访问window对象的其他任何信息。只能通过event.Source代理调用postMessage()方法。
XDM还有一个奇怪之处。首先,postMessage()的第一个参数最早是作为”永远都是字符串”来实现的。但后来这个参数的定义改了,改成允许传入任何数据结构。但是并非所有浏览器都实现了这个变化。所以保险起见,使用postMessage()方法的时候,最好只传字符串。如果你想传入结构化的数据,最好选择先在要传入的数据上调用JSON.stringify(),通过postMessage()方法传入得到的字符串,然后再在onmessage事件处理程序中调用JSON.parse()方法。
支持XDM的浏览器有Opera、IE8+、Safari 4+、Firefox 3.5+、Chrome、Android版Webkit和iOS版Safari。更多有关XDM的小东东可以去XDM官方页面去学习参考。XDM的官方页面是http://dev.w3.org/html5/postmsg/
HTML5实战与剖析之跨文档消息传递(iframe传递信息)的相关知识就为大家介绍到这里了,更多有关HTML5的相关东东还请关注梦龙小站的相关更新。
相关文章推荐
- HTML5实战与剖析之跨文档消息传递(iframe传递信息)
- html5跨文档消息传递
- JavaScript:HTML5跨文档消息传递
- Android源码剖析之Framwork层消息传递(Wms到View)
- magento 消息机制和错误信息传递
- HTML5实战与剖析之移动端IOS系统收缩地址导航栏功能
- 错误信息:响应消息的内容类型 text/html; charset=utf-8 与绑定(text/xml; charset=utf-8)的内 容类型不匹配
- iframe之间静态html页面如何传递参数?
- Struts消息/错误信息传递机制实例
- 【HTML+CSS+JavaScript】网页实战开发笔记之一——HTML的头部信息里你不知道的事
- HTML5 脚本编程之:跨文档消息传递&历史状态管理
- HTML5实战与剖析之WebSockets简介
- HTML5实战与剖析之字符集属性(charset和defaultCharset)
- QX项目实战-10.基础架构实验一:传递消息、序列化对象和数据库封装
- (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
- 剖析MFC六大关键技术(五六)--消息映射与命令传递
- HTML5实战与剖析之原生拖拽(二拖拽事件dragstart、drag和dragend)
- 【HTML+CSS+JavaScript】网页实战开发笔记之一——HTML的头部信息里你不知道的事
- HTML - 文档结构与信息声明,单位
- HTML5实战与剖析之原生拖拽(三dataTransfer对象)