HTML5实战与剖析之跨文档消息传递(iframe传递信息)
在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM。如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum域名中的页面通信。在XDM机制出现之前,要毫无压力地实现这种通信需要用很长时间。XDM把这种机制规范化,让咱们能够既稳妥又简单地实现跨文档通信。
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跨文档消息传递
HTML5定义了一些javascript API,其中有一个就是跨文档消息传递(cross-document-messaging简称XDM). 现在XDM已经作为一个规范独立了出来,名字为:Web M ...
- 跨文档消息传递----postMessage()
HTML5 规范中,提出了XDM,又称为 跨文档消息传递,其核心是 postMessage()方法,进行跨域和跨文档消息传递,示例如下: <div class="CrossDocume ...
- HTML(六)HTML iframe 使用postMessage方法进行跨文档消息传递
什么是iframe HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中. <iframe id="inlineFram ...
- HTML5中的跨文档消息传递
跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p. ...
- 通过Html5的postMessage和onMessage方法实现跨域跨文档请求访问
在项目中有应用到不同的子项目,通过不同的二级域名实现相互调用功能.其中一个功能是将播放器作为单独的二级域名的请求接口,其他项目必须根据该二级域名调用播放器.最近需要实现视频播放完毕后的事件触发,调用父 ...
- HTML5 跨文档消息传输
对窗口对象的message事件进行监听 window.addEventListener("message", function(event) { // 处理程序代码 }, fals ...
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- HTML5实战与剖析之字符集属性(charset和defaultCharset)
HTML5对字符集属性也进行了更新,其中charset和defaultCharset属性就是HTML5中新添加的字符集属性.有关charset和defaultCharset属性的具体讲解尽在HTML5 ...
随机推荐
- poj 1696 (计算几何基础)
poj 1696 Space Ant 链接:http://poj.org/problem?id=1696 题意:在坐标轴上,给定n个点的 id 以及点的坐标(xi, yi),让你以最底端点开始,从右依 ...
- 「CSS」css基础
1. 文字水平居中 将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center; 2. 容器水平居中 先该容器设置一个明确宽度,然后将margin的水平值 ...
- Java中关于Arrays.asList方法的深入学习与理解
Java的标准库中在java.util包下提供了很多实用的工具类,如:Arrays,Collections等工具类都提供了一些比较实用的方法.在实际的开发使用中,我们经常需要使用这样的需求:将一个数组 ...
- 第4章-Vue.js 交互及实例的生命周期
一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...
- TypeError: only integer scalar arrays can be converted to a scalar index
TypeError: only integer scalar arrays can be converted to a scalar index 觉得有用的话,欢迎一起讨论相互学习~Follow Me ...
- 分治法:三维偏序问题之CDQ分治
我怀疑那个k是用来定界限用的 #include <cstdio> #include <cstring> #include <algorithm> using nam ...
- 20155117王震宇 2016-2017-2 《Java程序设计》第八周学习总结
教材学习内容总结 正则表达式 正则表达式是记录文本规则的代码 元字符 ^ :^会匹配行或者字符串的起始位置,有时还会匹配整个文档的起始位置. $ :$会匹配行或字符串的结尾. \b :不会消耗任何字符 ...
- easyUI导出数据
easyUI导出数据模式 后台: //导出数据 public function index_doExport() { $search['diqu']=$_POST['diqu']; $search[' ...
- spring-boot支持websocket
spring-boot本身对websocket提供了很好的支持,可以直接原生支持sockjs和stomp协议.百度搜了一些中文文档,虽然也能实现websocket,但是并没有直接使用spring-bo ...
- Sqlmap注入技巧收集整理
TIP1 当我们注射的时候,判断注入 http://site/script?id=10http://site/script?id=11-1 # 相当于 id=10http://site/script? ...