H5学习系列之Communication API
1 、postMessage API
首先介绍一下什么是iframe?
百度百科里这样写道:IFRAME,HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。
我的理解就是网页中的网页。
通常会有如下两个方面的操作:1个就是在iframe里面操作父窗体,另外一种就是当前页面操作iframe里面的元素。
①iframe里的js操作父级窗口的dom
iframe里的js要操作父级窗口的dom,必须搞懂几个对象:
1、parent是父窗口(如果窗口是顶级窗口,那么parent==self==top),
2、top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),
3、self是当前窗口(等价window),
4、opener是用open方法打开当前窗口的那个窗口;
这样iframe里的js要操作父级窗口的dom可以通过parent,top这些对象来获取父窗口的window对象,例如:
parent.document.getElementById(“dom ID”);
parent,top还能调用父级窗口的的js方法,比如,getIFrameDOM(iID)是父级窗口的一个方法,那么iframe里可以使用parent.getIFrameDOM(“wIframeA”)来调用父级窗口的getIFrameDOM(iID)方法;
②父级窗口操作iframe里的dom
JS操作iframe里的dom可以使用contentWindow属性:
contentWindow属性,是指指定的frame或者iframe所在的window对象,在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则,必须指定contentWindow属性,contentWindow属性支持所有主流浏览器。
相关的还有一个contentDocument属性,这个属性是指指定的frame或者iframe所在的document对象,但是悲剧的是,ie6-ie7并不支持这个属性。
ie6和ie7还可以使用document.frames["iframe Name"]或者document.frames["iframe ID"]来获取相当于contentWindow属性,而firefox和chrome并不支持这些document.frames["iframe Name"]或者document.frames["iframe ID"],但是window.frames["iframe Name"]或window.frames[index](index是索引值)也支持所有主流浏览器;
所以通用写法就是document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID');
以上阐述存在一个问题就是跨域,如果iframe的src是跨域的那我们将无法对其元素操作(不是绝对的,实现起来比较繁琐)
因此才引出了postMessage的api
1、判断浏览器是否支持postMessage :老方法 if(postMessage){}进入if就是支持
2、一定要明确发送给谁消息(换句话说post给谁message)就用谁的window如发送给id为iframe1的iframe消息则是:document.getEelementById("iframe1")[0].contentWindow.postMessage("消息体","C此window对象对应页面的域名");
3、接受消息页面需要给window对象绑定message方法, function(e){e.origin指消息源的域名;e.data指消息体}
2、XMLHttpRequest Level 2 api
新版本的XMLHttpRequest对象,针对老版本的缺点,做出了大幅改进。
* 可以设置HTTP请求的时限。
* 可以使用FormData对象管理表单数据。
* 可以上传文件。
* 可以请求不同域名下的数据(跨域请求)。
* 可以获取服务器端的二进制数据。
* 可以获得数据传输的进度信息。
下面,我就一一介绍这些新功能。
1、HTTP请求的时限
有时,ajax操作很耗时,而且无法预知要花多少时间。如果网速很慢,用户可能要等很久。
新版本的XMLHttpRequest对象,增加了timeout属性,可以设置HTTP请求的时限。
xhr.timeout = 3000;
上面的语句,将最长等待时间设为3000毫秒。过了这个时限,就自动停止HTTP请求。与之配套的还有一个timeout事件,用来指定回调函数。
xhr.ontimeout = function(event){
alert('请求超时!');
}
目前,Opera、Firefox和IE 10支持该属性,IE 8和IE 9的这个属性属于XDomainRequest对象,而Chrome和Safari还不支持。
2、FormData对象
ajax操作往往用来传递表单数据。为了方便表单处理,HTML 5新增了一个FormData对象,可以模拟表单。
首先,新建一个FormData对象。
var formData = new FormData();
然后,为它添加表单项。
formData.append('username', '张三');
formData.append('id', 123456);
最后,直接传送这个FormData对象。这与提交网页表单的效果,完全一样。
xhr.send(formData);
FormData对象也可以用来获取网页表单的值。
var form = document.getElementById('myform');
var formData = new FormData(form);
formData.append('secret', '123456'); // 添加一个表单项
xhr.open('POST', form.action);
xhr.send(formData);
3、上传文件
新版XMLHttpRequest对象,不仅可以发送文本信息,还可以上传文件。
假定files是一个"选择文件"的表单元素(input[type="file"]),我们将它装入FormData对象。
var formData = new FormData();
for (var i = 0; i < files.length;i++) {
formData.append('files[]', files[i]);
}
然后,发送这个FormData对象。
xhr.send(formData);
4、跨域资源共享(CORS)
新版本的XMLHttpRequest对象,可以向不同域名的服务器发出HTTP请求。这叫做"跨域资源共享"(Cross-origin resource sharing,简称CORS)。
使用"跨域资源共享"的前提,是浏览器必须支持这个功能,而且服务器端必须同意这种"跨域"。如果能够满足上面的条件,则代码的写法与不跨域的请求完全一样。
xhr.open('GET', 'http://other.server/and/path/to/script');
5、接收二进制数据(方法A:改写MIMEType)
老版本的XMLHttpRequest对象,只能从服务器取回文本数据(否则它的名字就不用XML起首了),新版则可以取回二进制数据。
这里又分成两种做法。较老的做法是改写数据的MIMEType,将服务器返回的二进制数据伪装成文本数据,并且告诉浏览器这是用户自定义的字符集。
xhr.overrideMimeType("text/plain; charset=x-user-defined");
然后,用responseText属性接收服务器返回的二进制数据。
var binStr = xhr.responseText;
由于这时,浏览器把它当做文本数据,所以还必须再一个个字节地还原成二进制数据。
for (var i = 0, len = binStr.length; i < len; ++i) {
var c = binStr.charCodeAt(i);
var byte = c & 0xff;
}
最后一行的位运算"c & 0xff",表示在每个字符的两个字节之中,只保留后一个字节,将前一个字节扔掉。原因是浏览器解读字符的时候,会把字符自动解读成Unicode的0xF700-0xF7ff区段。
八、接收二进制数据(方法B:responseType属性)
从服务器取回二进制数据,较新的方法是使用新增的responseType属性。如果服务器返回文本数据,这个属性的值是"TEXT",这是默认值。较新的浏览器还支持其他值,也就是说,可以接收其他格式的数据。
你可以把responseType设为blob,表示服务器传回的是二进制对象。
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png');
xhr.responseType = 'blob';
接收数据的时候,用浏览器自带的Blob对象即可。
var blob = new Blob([xhr.response], {type: 'image/png'});
注意,是读取xhr.response,而不是xhr.responseText。
你还可以将responseType设为arraybuffer,把二进制数据装在一个数组里。
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png');
xhr.responseType = "arraybuffer";
接收数据的时候,需要遍历这个数组。
var arrayBuffer = xhr.response;
if (arrayBuffer) {
var byteArray = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteArray.byteLength; i++) {
// do something
}
}
6、进度信息
新版本的XMLHttpRequest对象,传送数据的时候,有一个progress事件,用来返回进度信息。
它分成上传和下载两种情况。下载的progress事件属于XMLHttpRequest对象,上传的progress事件属于XMLHttpRequest.upload对象。
我们先定义progress事件的回调函数。
xhr.onprogress
= updateProgress;
xhr.upload.onprogress
= updateProgress;
然后,在回调函数里面,使用这个事件的一些属性。
function
updateProgress(event) {
if
(event.lengthComputable) {
var
percentComplete = event.loaded / event.total;
}
}
上面的代码中,event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0。
与progress事件相关的,还有其他五个事件,可以分别指定回调函数:
* load事件:传输成功完成。
* abort事件:传输被用户取消。
* error事件:传输中出现错误。
* loadstart事件:传输开始。
* loadEnd事件:传输结束,但是不知道成功还是失败。
本人是.net开发者所以附上.net服务器端允许跨域请求的代码:
context.Response.Headers.Add("Access-Control-Allow-Origin", "origin1");
context.Response.Headers.Add("Access-Control-Allow-Origin", "http://test2.xiaotian2.com");
或者直接
context.Response.Headers.Add("Access-Control-Allow-Origin", "*");
另外多说一句,跨域请求的ajax如果遇到redirect那么如果redirect的url如果同样具有access-control-allow-origin此请求的域,同样可以成功。
H5学习系列之Communication API的更多相关文章
- H5学习系列之Geolocation API
获取位置信息途径: 1.IP地址地理定位数据 2.GPS地理定位数据 3.WI-FI地理定位数据 4.手机地理定位数据 无废话直接上重点:navigator.geolocation对象就是获取地理位置 ...
- H5学习系列之文件读取API--本文转自http://blog.csdn.net/jackfrued/article/details/8967667
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...
- H5学习系列之Audio和Video
1.视频文件:音频轨道.视频轨道和一些元数据(视频封面.标题.子标题.字幕等相关信息). 2.目前H5还不支持的:流式音频和视频(H5对视频的支持只限于加载的全部媒体文件).H5的媒体收到跨域资源共享 ...
- Redis总结(五)缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结(一)AutoResetEvent的使用介绍(用AutoResetEvent实现同步) C#总结(二)事件Event 介绍总结 C#总结(三)DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列(六): RabbitMQ 高可用集群
Redis总结(五)缓存雪崩和缓存穿透等问题 前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...
- Html5 学习系列(四)文件操作API
原文:Html5 学习系列(四)文件操作API 引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨 ...
- 大数据学习系列之三 ----- HBase Java Api 图文详解
版权声明: 作者:虚无境 博客园出处:http://www.cnblogs.com/xuwujing CSDN出处:http://blog.csdn.net/qazwsxpcm 个人博客出处:http ...
- EF(Entity Framework)系统学习系列
好久没写博客了,继续开启霸屏模式,好了,废话不多说,这次准备重新系统学一下EF,一个偶然的机会找到了一个学习EF的网站(http://www.entityframeworktutorial.net/) ...
- MVC学习系列4--@helper辅助方法和用户自定义HTML方法
在HTML Helper,帮助类的帮助下,我们可以动态的创建HTML控件.HTML帮助类是在视图中,用来呈现HTML内容的.HTML帮助类是一个方法,它返回的是string类型的值. HTML帮助类, ...
- RabbitMQ学习系列(三): C# 如何使用 RabbitMQ
上一篇已经讲了Rabbitmq如何在Windows平台安装,还不了解如何安装的朋友,请看我前面几篇文章:RabbitMQ学习系列一:windows下安装RabbitMQ服务 , 今天就来聊聊 C# 实 ...
随机推荐
- linux top命令中各cpu占用率含义
linux top命令中各cpu占用率含义 [尊重原创文章摘自:http://www.iteye.com/topic/1137848]0.3% us 用户空间占用CPU百分比 1.0% sy 内核空间 ...
- MSSQL 查询数据库所有表的大小, 有助于删除一些没用的表
SELECT b.name AS tablename , a.rowcnt AS datacount FROM sysindexes a , sysobjects b WHERE a.id = b.i ...
- AIX 环境下整理文件系统碎块
IBM AIX v5.3以上版本操作系统环境下基本上不需要对文件系统碎块进行整理,查到AIX里有整理文件系统碎块命令,这里简单提一下. 命令:defragfs例:#defragfs /var defr ...
- Google V8编程详解(二)HelloWorld
转自http://blog.csdn.net/feiyinzilgd/article/details/8248448 上一章讲到了V8的编译和安装,这一章开始从一个demo着手. 这里选用了官方文档的 ...
- Random Javascript code snippets
MollyPages.org"You were wrong case.To live here is to live." Home Pages / Database / Forms ...
- VC++ 解决在鼠标移动时,光标闪烁的问题。其实本质是 ON_SETCURSOR的用法
在调用Windows API函数SetCursor设置光标时,可能会碰到闪烁的问题:移动鼠标,光标在Class Cursor(即注册窗口类时指定的Cursor)与预设Cursor之间闪烁. 在MSDN ...
- cef3 获得js 返回值, 以及js 指挥delphi 函数的 总结参考
cef3 如何加载 本地html 文件. 请教老师[吐槽]常忘<run_fan@qq.com> 22:21:45@lazarus 下载cef3中的范例中就有 [吐槽]常忘< ...
- Device eth0 does not seem to be present, delaying initialization. 问题
今天在复制vmware的时候 出现网卡无法启动 报错显示 Device eth0 does not seem to be present, delaying initialization. 这个错误原 ...
- spark job, stage ,task介绍。
1. spark 如何执行程序? 首先看下spark 的部署图: 节点类型有: 1. master 节点: 常驻master进程,负责管理全部worker节点. 2. worker 节点: 常驻wor ...
- 提高sevenzipsharp 检查密码的速度(1)
前言:sevenzipsharp检查密码(包括检查压缩包的有效性)的函数是SevenZipExtractor.check(), sevenzipsharp调用的是7zip的动态链接库,而且不止是7zi ...