GL 创建的主题

WebAPI参考之核心DOM接口——Node

Web API

1 发布

Node接口表示文档DOM树中的一个节点，Element、Attr、CDATASection等接口，都是从Node继承过来的。

Node() 继承层次

Object.prototype 　
Function.prototype 　　
EventTarget 　　　
Node

构造函数

程序不能直接调用该构造函数，否则将会产生异常。

属性列表属性说明ELEMENT_NODE常量1,代表一个元素节点，例如 <p> 和 <div>。ATTRIBUTE_NODE常量2，代表元素的耦合属性。在 DOM4 规范里Node 接口将不再实现这个元素属性。TEXT_NODE常量3，Element 或者 Attr 中实际的文字CDATA_SECTION_NODE常量4，一个CDATASection。在 DOM4 规范里被移除。ENTITY_REFERENCE_NODE常量5，一个 XML 实体引用节点。在 DOM4 规范里被移除。ENTITY_NODE常量6，一个 XML <!ENTITY …> 节点。在 DOM4 规范中被移除。PROCESSING_INSTRUCTION_NODE常量7,ProcessingInstruction ，例如 <?xml-stylesheet … ?> 声明。COMMENT_NODE常量8,一个 Comment 节点。DOCUMENT_NODE常量9,一个 Document 节点。DOCUMENT_TYPE_NODE常量10,描述文档类型的 DocumentType 节点。例如 <!DOCTYPE html> 就是用于 HTML5 的。DOCUMENT_FRAGMENT_NODE常量11,一个 DocumentFragment 节点NOTATION_NODE常量12,一个 XML <!NOTATION …> 节点。在 DOM4 规范里被移除. 方法列表语法说明-- Node.prototype 继承层次

Object.prototype 　EventTarget.prototype 　　Node.prototype

属性列表

从其父级继承的属性请查阅: EventTarget。

属性说明attributes-baseURI只读，返回节点绝对基 URL 。childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。firstChild只读, 返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。lastChild只读，返回当前节点的最后一个子节点。如果父节点为一个元素节点，则子节点通常为一个元素节点，或一个文本节点，或一个注释节点。如果没有子节点，则返回 null。localName返回此节点的限定名称的本地部分。Returns the local part of the qualified name of this node.namespaceURI只读，返回节点的命名空间URI（namespace URI），如果节点不在一个命名空间中，则返回 null。当节点是文档节点时，返回当前文档的 XML 命名空间（namespace）。nextSibling只读，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。nodeName返回当前节点的节点名称nodePrincipal只读，返回代表该节点的当前安全上下文的 nsiprincipal 对象。nodeType只读，表示的是该节点的类型。nodeValue获取或设置当前节点的值。ownerDocument只读,返回当前节点的顶层的 document 对象。parentNode返回指定的节点在DOM树中的父节点.parentElement返回当前节点的父元素节点,如果该元素没有父节点,或者父节点不是一个元素节点.则返回null.prefixprefix属性会返回当前节点的命名空间前缀,如果没有指定命名空间前缀,则返回null,该属性只读.previousSibling返回当前节点的前一个兄弟节点,没有则返回null.textContenttextContent 属性可以表示一个节点及其内部节点的文本内容。方法列表

从其父级继承的方法请查阅: EventTarget。

语法说明appendChild()将一个节点添加到指定父节点的子节点列表末尾。cloneNode()返回调用该方法的节点的一个副本.compareDocumentPosition()比较当前节点与任意文档中的另一个节点的位置关系。contains()返回一个布尔值来表示是否传入的节点是，该节点的子节点。hasChildNodes()返回一个布尔值,表明当前节点是否包含有子节点.insertBefore()在当前节点的某个子节点之前再插入一个子节点。isDefaultNamespace()接受一个命名空间 URI 作为参数,如果该命名空间是当前节点的默认命名空间,则返回 true,否则返回false.isEqualNode()判断两个节点是否相等。当两个节点的类型相同，定义特征(defining characteristics)相同（对元素来说，即 id，孩子节点的数量等等），属性一致等，这两个节点就是相等的。一些具体的数据指出：多数时候的比较是根据节点的类型来的。lookupPrefix()返回一个和指定命名空间URI绑定的命名空间前缀.如果没有,返回null. 如果有多个绑定的前缀, 返回的结果根据浏览器实现而定.lookupNamespaceURI()返回当前节点上与指定命名空间前缀绑定的命名空间URI,如果没有,返回null,如果参数为null,返回默认的命名空间.normalize()将当前节点和它的后代节点”规范化“（normalized）。在一个“规范化”后的 DOM 树中，不存在一个空的文本节点，或者两个相邻的文本节点。removeChild()从DOM中删除一个子节点。返回删除的节点。replaceChild()用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。 Node实例

不存在Node接口的直接实例。

参考

相关页面

Object

外部链接

Node-MDN

WebAPI参考之核心DOM接口——EventTarget

Web API

1 发布

EventTarget接口由可以接收事件的对象实现。Element、document和window是最常见的事件目标，但是其他对象也可以是事件目标，如XMLHttpRequest, AudioNode, AudioContext等。

EventTarget() 继承层次

Object.prototype 　Function.prototype 　　EventTarget

构造函数

程序不能直接调用该构造函数，否则将会产生异常。

属性列表方法列表语法说明-- EventTarget.prototype 继承层次

Object.prototype 　EventTarget.prototype

属性列表属性说明-- 方法列表语法说明addEventListener()在 EventTarget上注册特定事件类型的事件处理程序。removeEventListener()EventTarget 中删除事件侦听器。dispatchEvent()将事件分派到此 EventTarget。 EventTarget实例

不存在EventTarget接口的直接实例。

参考

相关链接

Object

WebAPI参考之核心DOM接口——Element

Web API

1 发布

Element接口表示一个元素，该接口扩展自Node接口，描述了元素所普遍具有的方法和属性。

继承自Element接口有：HTMLElement 接口是所有HTML元素的基础接口，而 SVGElement 接口是所有SVG元素的基础接口。

Element() 继承层次

Object.prototype 　Function.prototype 　　EventTarget 　　　Node 　　　　Element

构造函数

程序不能直接调用该构造函数，否则将会产生异常。

属性列表属性说明-- 方法列表语法说明-- Element.prototype 继承层次

Object.prototype 　EventTarget.prototype 　　Node.prototype 　　　Element.prototype

属性列表

从其父级继承的属性请查阅: Node, EventTarget.

属性说明attributes只读，返回一个与该元素相关的所有属性集合NamedNodeMapclassList只读，返回该元素包含的class属性是一个DOMTokenList。className它是一个 DOMString 表示这个元素的class。id是一个DOMString 表示这个元素的id。innerHTML是一个DOMString 表示这个元素的内容文本。namespaceURI只读，属性返回指定节点的命名空间的 URI。tagName只读，返回类型为：String，表示该元素的标签名。事件句柄　属性说明ongotpointercapture返回的 gotpointercapture 事件类型的事件处理程序。onlostpointercapture返回的 lostpointercapture 事件类型的事件处理程序。方法列表

从其父级继承的方法请查阅: Node, EventTarget.

语法说明getAttribute()getAttribute() 返回元素上指定属性（attribute）的值。如果指定的属性不存在，则返回 null 或 “” （空字符串）。getAttributeNS()从当前节点检索具有指定的名称和命名空间，属性的值并将其作为对象返回。getBoundingClientRect()返回元素的大小及其相对于视口的位置。getClientRects()返回一个指向客户端中每一个盒子的边界矩形的矩形集合。getElementsByClassName()参数中给出类的列表，返回一个动态的 HTMLCollection ，这里面包含了所有持有这些类的后代元素。getElementsByTagName返回一个动态的包含所有指定标签名的元素的HTML集合HTMLCollection。hasAttribute()返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。hasAttributeNS()hasAttributeNS 返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。hasAttributes()hasAttributes属性返回一个布尔值true或false,来表明当前元素节点是否有至少一个的属性(attribute).querySelector()返回作为其所调用的元素的后代的第一个元素，该元素与指定的选择器组相匹配。querySelectorAll()返回一个non-live的NodeList, 它包含所有元素的非活动节点，该元素来自与其匹配指定的CSS选择器组的元素。(基础元素本身不包括，即使它匹配。)removeAttribute()从指定的元素中移除一个属性。removeAttributeNS()从当前节点中移除具有指定的名称和命名空间的属性。setAttribute()添加一个新属性（attribute）到元素上，或改变元素上已经存在的属性的值。setAttributeNS()从当前节点设置具有指定的名称和命名空间，属性的值。setPointerCapture()指定一个特定的元素作为未来事件的捕获目标的指针。 Element实例

不存在Element接口的直接实例。

参考

相关链接

Object EventTarget Node

外部链接

Element-MDN

WebAPI设备访问之设备震动

Web API

1 发布

概述

设备震动(Vibration )API是通过vibrate()方法来实现的,通过该方法, 当有事件通知时,WEB应用程序可以让设备震动以达到提醒用户的目的。

代码示例浏览器支持检测

通过以下代码可以事先检测浏览器是否支持本API。

if(navigator.vibrate) { //支持此API } else { //不支持此API } 震动一次

为了让设备震动一次,我们调用vibrate()方法,并传递一个指示震动持续时间的数值(毫秒单位)。

// 震动一次1分钟 navigator.vibrate(60*1000); 震动多次

为了让设备震动多次, 我们将一个整数数组传递给振动方法,指示震动的次数,各次的持续时间以及停顿时间:

/ 震动三次 // 前两次震动为1秒钟 // 最后一次震动为2秒钟 // 停顿半秒钟 navigator.vibrate([1000, 500, 1000, 500, 2000]); 参考

相关页面

外部链接

Navigator.vibrate()-MDN

WebAPI设备访问之设备方向

Web API

1 发布

概述

设备方向(Orientation)API是通过deviceorientation事件来实现的,通过监测deviceorientation事件, WEB应用程序可以监视设备(通常是手机游戏机等移动设备)的方向变换,在方向变换后做一些相应的处理,例如页面布局调整等等。

代码示例浏览器支持检测

通过以下代码可以事先检测浏览器是否支持本API。

if(window. DeviceOrientationEventt) { //支持此API } else { //不支持此API } 监视方向变化 window.addEventListener('deviceorientation', function((orientData) { var absolute = orientData.absolute; // 表示该设备是否提供绝对定位数据 var alpha = orientData.alpha; // 表示设备沿z轴上的旋转角度，范围为0~360 var beta = orientData.beta; // 表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备由前向后旋转的情况。 var gamma = orientData.gamma; // 表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备由左向右旋转的情况 // Do some things. }); 参考

相关页面

外部链接

检测设备方向-MDN

WebAPI设备访问之桌面通知

Web API

1 发布

概述

可以方便的通过Notifications API为web应用添加桌面通知功能。

示例 if(window.Notification) { if(window.Notification.permission !== "granted") { Notification.requestPermission(); } notify(); } else { console.log("当前浏览器不支持桌面通知！"); } function notify() { var notification = new window.Notification("this is notification title", { icon: "", body: "hey there! this is notification body!" }); notification.onclick = function() { // do something } } 效果代码说明

Notification的三个参数：

title：显示的标题options：dir：文字方向lang：使用的语言body：显示的正文tag：通知的IDicon：显示的图标

Notification的事件：

onclick：点击通知时触发onshow：通知显示时触发onerror：遇到错误是触发onclose：关闭通知时触发

WebAPI设备访问之屏幕亮度

Web API

1 发布

概述

屏幕亮度(Luminosity )API是通过devicelight事件来实现的,通过监测devicelight事件,WEB应用程序可以监视屏幕亮度的变换,在屏幕亮度变换后做一些相应的处理机。

代码示例浏览器支持检测

通过以下代码可以事先检测浏览器是否支持本API。

if(window. DeviceLightEvent) { //支持此API } else { //不支持此API } 监视屏幕亮度 window.addEventListener('devicelight', function(event) { var bodyBg= document.body.style; //event.value is the lux value returned by the sensor on the device if (event.value < 100) { // working in a dark environment bodyBg.backgroundColor="lightgrey"; } else if (event.value < 1000){ // working in a normal environment bodyBg.backgroundColor="#fff"; } else } // working in a bright environment bodyBg.backgroundColor="darkgray"; } }); 参考

相关页面

外部链接

Using_light_sensors-MDN

WebAPI设备访问之地理定位

Web API

1 发布

概述

地理定位(Geolocation)API是通过navigator的geolocation属性来实现的,geolocation对象用于用户向Web应用程序提供他们的位置。因为隐私，报告地理位置前需要先请求用户许可。

代码示例浏览器支持检测

通过以下代码可以事先检测浏览器是否支持本API。

if(window.navigator && window.navigator.geolocation) { //支持此API } else { /不支持此API } 获取当前位置

通过getCurrentPosition()方法可以获得用户当前的位置。方法会异步请求获取位置，并查询定位硬件来获取最新信息。

navigator.geolocation.getCurrentPosition(function(position) { //获取位置后 } 监听位置变换

通过watchPosition()方法可设定一个回调函数来监听用户位置的变换化，该方法的参数与getCurrentPosition()相同。

var watchID = navigator.geelocation.watchPosition(function(position) { //....... }

watchPosition()方法会返回一个ID，可将ID传给clearWatch()方法来停止监视用户位置。

navigator.geolocation.clearWatch(watchID); 参考

相关页面

Geolocation

外部链接

https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/Using_geolocation

WebAPI设备访问之摄像头

Web API

1 发布

概述

摄像头(Camera)API是通过input元素来实现的，其中该元素的type属性必须为“file”,accept属性要允许图片格式，这样才能指示该文件选择框允许选择图片，包括直接通过摄像头拍摄图片。

当用户激活input元素时，系统会显示一个选择页面，其中一个选项是选择本地的图片文件，另外一个选项是通过摄像头直接拍摄图片作为选择的图片。

若用户选择摄像头，就进入设备(包括PC、手机、平板等)的拍照模式。拍照完成后，用户能够选择确认或放弃，如果确认，该图片会作为所选文件发送给<input type=“file”>元素，同时触发该元素的onchange事件。

代码示例获取照片

通过File API,可获取到用户所拍摄的图片的引用。

获得了图片(也就是File对象)之后，我们就可以直接在前端将改图片显示到页面上。

使用URL.createObjectURL()方法

function showPicture(picFile) //获取到img元素 var imgEl= document.getElementById("pictureShower"); // 获取到window.URL对象 var URL = window.URL || window.webkitURL; // 创建一个对象URL字符串 var imgURL = URL.createObjectURL(file); // 设置img元素的src属性为那个URL imgEl.src = imgURL; // 释放那个对象URL URL.revokeObjectURL(imgURL); }

使用FileReader.readAsDataURL()方法

function showPicture(picFile) //获取到img元素 var imgEl= document.getElementById("pictureShower"); var fileReader = new FileReader(); fileReader.onload = function (event) { imgEl.src = event.target.result; }; fileReader.readAsDataURL(file); } 参考

相关页面

外部链接

使用Camera API-MDN

WebAPI设备访问之电池状态

Web API

1 发布

概述

电池状态(Battery Status)API是通过navigator的battery属性来实现的,battery对象提供了有关系统电池级别的信息,还定义了一些当电池电量或状态发生变化时触发的事件。

因此WEB应用程序可以监视电池的状况以做一些相应的处理,比如电量不足的时候把数据做个离线保存等等。

代码示例浏览器支持检测

通过以下代码可以事先检测浏览器是否支持本API。

if(navigator.battery) { //支持此API } else { //不支持此API } 监视电池状态

Battery Status API 允许我们监听四个事件, 其中每一项都可以映射到window.navigator.battery上的属性的更改。

chargingchange 当设备的充电器激活或停用时触发该事件。chargingtimechange 当剩余的充电时间变化时触发。dischargingtimechange 当剩余时间直到电池完全放电变化时触发。levelchange 当电池级别已更改时触发。 navigator.battery.addEventListener('levelchange'. function(e) { .... }); 参考

相关页面

BatteryManager

WebAPI通信之WebSocket

Web API

1 发布

背景

通常，当客户端访问一个网页时，会向Web服务器发送一个HTTP请求，Web服务器接收该请求，并返回响应，客户端在接收到响应后再将信息呈现出来。

对于那些信息变化不是特别频繁的应用来说，也许不会造成多大的影响，但是对于那些对实时性要求比较高即信息经常变化的应用来说（比如在线游戏，信息推送等），就必须采用某种机制来确保服务器与浏览器间的信息同步。

在WebSocket规范出来之前，可供选择的机制一般三种：

轮询（Polling）CometFlash插件轮询

这是最早的一种实现实时Web应用的方案，客户端按照一定的时间间隔频繁的向服务器发送请求，来实现服务端与客户端的同步。这种方案十分低效，因为并没有什么机制能确定每次发送的请求都能从服务端获得更新的数据（由于服务器更新数据的延时性，会造成客户端发送很多无用的请求，从而浪费了很多通信资源）。

comet

Comet本质上还是轮询，只是对上述轮询的缺点上做了些改进，最大限度的降低无效的网络传输。 Comet又分为长轮询技术和流技术，长轮询技术的实现是，给轮询设置条件（比如设置过期时间），当该条件被触发时再发送请求。流技术通常就是在客户端的页面使用一个隐藏窗口向服务端发出一个长连接请求，服务端响应该请求并不断更新连接状态以保证客户端和服务端的连接不过期，在面对并发量比较大的应用时，采用这一方案会消耗很多服务端的资源。

Flash 插件

AdobeFlash通过自己的Socket完成数据交换，JavaScript调用Flash提供的API，来实现数据的实时传输。这种方式比轮询要高效得多，但由于需要使用Flash插件，在一些不支持Flash插件或支持得不好客户端上，仍然不能实现实时需求。

不管是轮询还是comet，这些技术都不能称之为真正的实时技术，它们只是通过Ajax方式来模拟实时效果，客户端和服务端的每次交互都是一次完整的HTTP协议的传输过程（HTTP头信息作为传输内容），大大增加了应用的信息传输量，而且为了实现这些方案，往往需要构建较为复杂的服务端和客户端的编程实现。总体而言，这些技术是即增加了服务端的负载又增加了编程复杂度。

针对以上技术的缺陷以及web进一步的高并发和实时性需求的环境下，基于HTML5规范的WebSocket应运而生。

WebSocket是一个基于TCP协议之上解决客户端和服务端之间双向通信的协议，它能高效的实现实现需求。目前有关实时功能的实现基本上都采用WebSocket来实现。

实现

WebSocket的实现分为客户端和服务端两部分，客户端发出WebSocket连接请求，服务端响应，实现类似TCP握手的动作，客户端和服务端可以通过这个连接通道传递消息，这个连接会持续存在直到一方主动关闭连接时为止。

服务端

rails 5中引入了一个全新的基于WebSocket的框架—Action Cable，可以很方便的构建实时通知系统。下面简单列一下基础代码，有兴趣的朋友也可以点击后面的参考链接作深入的学习。

def push_to_client user = User.find(self.user_id) user.following_by_type("User").distinct.pluck("id").each do |uid| ActionCable.server.broadcast "notifications/#{uid}", {id: self.id, notifyType: "createTweet"} end rescue nil end

扩展链接： https://github.com/rails/actioncable-examples https://www.sitepoint.com/create-a-chat-app-with-rails-5-actioncable-and-devise/

客户端 // 发布消息 var initWebsocket = function() { var self = this; if (window.UasApp && window.UasApp.cable) { if (!this.notificationChannel) { this.notificationChannel = window.UasApp.cable.subscriptions.create("NotificationsChannel", { connected: function() { console.log("connected ................"); }, received: function(data) { self.trigger("notified", { data: data }); } }); } } }; // 监听消息 var bindNotifications = function() { // 监听websocket发布的消息，构建从关注者过来的内容 var self = this; this.own(runtime.on("notified", function(evt) { var data = evt.data; if (data.notifyType === "createTweet") { self.newTweetIds.push(data.id); self.addToNoti(); } })); };

要点说明：

1. 上面的rails代码主要用到了Action Cable模块，目前已整合到rails 5.0版本中，属于rails的一部分，源代码。Action Cable 包含了后台和前端的实现，可以方便的为项目添加基于websocket的通信功能。

2. 上面的前端代码，主要实现了事件分发的功能，首先定制了action cable提供的received方法，该方法会触发notified事件的执行，然后在各实例DOM中监听notified事件，处理其对应的DOM操作，比如样例中的添加新tweet。

总结：如果需要在客户端与服务端之间建立极低延迟、近乎即时的连接，则可以使用WebSocket，比如下面的一些实用场景：

多人在线游戏即时聊天体育赛况直播即时更新社交信息流参考

- WebSocket basics - WebSocket API - WebSocket MDN

WebAPI通信之XMLHttpRequest

Web API

1 发布

概述

XMLHttpRequest是一个前端获取服务端数据的API对象。

示例 var request = new XMLHttpRequest(); request.onload = function() { if(this.status == 200 && this.responseXML != null && this.responseXML.getElementById('test').textContent) { // success function(data) { // processing data } } else { // handle error } } request.open("GET", "xxxUrl"); request.send(); 代码说明

示例中实例化了一个XMLHttpRequest对象，通过为该对象绑定onload回调函数处理从xxxUrl返回来的数据。

XMLHttpRequest支持的事件主要有：

onloadstartonprogressonabortonerroronloadontimeoutonloadendonreadystatechange

open函数：

参数：method：请求使用的HTTP方法：GET、POST、PUT、DELETE等url：请求的urlasync：可选参数，请求的模式，是否执行异步操作，默认是异步(true)user：授权使用的用户名password：密码

send函数：发送请求。如果该请求是异步模式，该方法会立刻返回。如果请求是同步模式，则直到请求的响应完全接受以后，该方法才会返回。

WebAPI通信之跨文档通信

Web API

1 发布

背景

出于安全和隐私方面的考虑，在web浏览器中，实施了不同域名下的文档间不能通信的举措，也就日常说的禁止跨域执行脚本。

但是在某些开发场景中还是会出现需要通过执行跨域脚本来实现某些功能的案例。本章介绍的跨文本通信，正是为了解决这些案例而设计的。跨文档通信，可以在不同网页文档，不同端口（跨域情况下）进行消息传递。

说概念总是枯燥的，不妨先看个实际例子—不同iframe间的通信：

例子 // iframe1: var form = document.getElementById("form"); form.onsubmit = function() { var message = document.getElementById('input-text').value; window.parent.frames[1].postMessage(message, '*'); return false; } // iframe2 var message = document.getElementById('message'); var messageHandle = function(evt) { message.innerHTML = '接收的消息是：' + evt.data; }; if (window.addEventListener) { window.addEventListener("message", messageHandle, false); } else if (window.attachEvent) { window.attachEvent('onmessage', messageHandle); }

效果图

源代码---请猛戳这里

说明：

- iframe1中：

window.parent.frames[1].postMessage(message, “*”) 这行代码效果是给iframe2发送一个消息即iframe中的form信息。window.parent.frames是一个数组，包含了当前页面的所有iframe。postMessage方法有两个参数：message：发送的数据，数据格式可以是字符串，结构对象、数据对象（如：File和ArrayBuffer）或者数组，不过需要注意的是IE8/IE9/FireFox3.6及其以下版本只支持字符串数据。targetOrigin：发送数据的来源，可以看成是个过滤条件，也就是说除非接收信息浏览上下文来源于提供的targetOrigin中的一个匹配，否则浏览器不会发送消息。transfer：可选参数

- iframe2中：

window.addEventListener和window.attachEvent实现对iframe1发送消息事件的监听。关于源安全：

上面一节有介绍postMessage的targetOrigin参数，它是网络应用建立信任关系的地址子集，一个源由规则（scheme）、主机（host）、端口（port）组成。上一节的demo中将targetOrigin设置成了通配符*这个在实际使用场合需要避免，因为这是不安全的做法，实际情况下，在处理跨源通信的消息时，一定要验证每个消息的源。一些相对安全的开发技巧：

使用element.textContent=evt.data替代element.innerHTML=evt.data，因为后者会把evt.data当成标记处理。不要使用第三方的字符串求值避免使用eval方法处理应用内部的字符串

WebAPI客户端存储之磁盘文件读取

Web API

1 发布

磁盘文件指的是客户端操作系统本地文件系统中的文件，也经常直接被称作本地文件，但因为容易与沙箱文件系统的WEB本地文件系统相混淆，所以特意将名称区分了一下。

概述

磁盘文件读取API是通过FileReader对象来实现的。

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象。

这也意味着没有用户的参与，WEB应用程序是没有能力直接指定读取磁盘上的任何一个文件的。

示例代码

下面的代码可以实现图片的本地预览:

<!doctype html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>Image preview example</title> <script type="text/javascript"> oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\- cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; }; function loadImageFile() { if (document.getElementById("uploadImage").files.length === 0) { return; } var oFile = document.getElementById("uploadImage").files[0]; if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } oFReader.readAsDataURL(oFile); } </script> </head> <body onload="loadImageFile();"> <form name="uploadForm"> <table> <tbody> <tr> <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td> <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td> </tr> </tbody> </table> <p><input type="submit" value="Send" /></p> </form> </body> </html>

下面是执行效果：

参考

相关页面

FileReader

外部链接

在WEB应用中使用文件-MDN

WebAPI客户端存储之剪贴板

Web API

1 发布

概述

剪贴板(Clipboard)API是通过copy、cut、paste等事件来实现的。

WEB应用程序可以通过处理这些事件，与其他WEB应用程序以及客户端本地应用程序进行数据交换。

代码示例复制数据

当用户启动复制操作时, 如果应用程序没有取消该事件的缺省动作，则所选数据将被复制到剪贴板。

另外，应用程序可以通过event.clipboardData API来控制复制到剪贴板的数据类型和内容。

document.addEventListener('copy', function(e){ e.clipboardData.setData('text/plain', 'Hello, hudao!'); e.clipboardData.setData('text/html', '<b>Hello, hudao!</b>'); e.preventDefault(); }); 剪切数据

当用户启动剪切操作时, 如果应用程序没有取消该事件的缺省动作，则所选内容将被复制到剪贴板，并从文档中删除所选内容。

但是在非编辑环境(non-editable context)中, 如果应用程序也没有做相应的处理， “剪切” 操作将不做任何事情。

document.addEventListener('cut', function(e){ e.clipboardData.setData('text/plain', 'Hello, hudao!'); e.clipboardData.setData('text/html', '<b>Hello, hudao!</b>'); e.preventDefault(); }); 粘贴数据

当用户启动粘贴操作时, 如果应用程序没有取消该事件的缺省动作，则剪贴板数据将粘贴到页面。

但是在非编辑环境(non-editable context)中, 如果应用程序也没有做相应的处理， “粘贴” 操作将不做任何事情。

document.addEventListener('paste', function(e){ if(e.clipboardData.types.indexOf('text/html') > -1){ processDataFromClipboard(e.clipboardData.getData('text/html')); e.preventDefault(); } }); 参考

相关页面

外部链接

ClipboardEvent-MDN

WebAPI客户端存储之IndexedDB

Web API

1 发布

概述

索引数据库(IndexedDB)API是indexedDB对象来实现的。

IndexedDB是一个基于事务的文档数据库，完全内置于浏览器中的一个沙盒环境中。一个网站可以有一个或多个IndexedDB数据库，每个数据库必须具有惟一的名称。一个数据库可包含一个或多个对象存储。一个对象存储（由一个名称惟一标识）是一个记录集合。每个记录有一个键和一个值。该值是一个对象，可拥有一个或多个属性。

代码示例创建数据库

TODO：编辑中

删除数据库

TODO：编辑中

创建对象存储

TODO：编辑中

存取记录

TODO：编辑中

使用事务

TODO：编辑中

参考

相关页面

indexedDB

外部链接

IndexedDB-MDN

WebAPI客户端存储之本地文件系统

Web API

1 发布

首先要声明的是,这里的本地文件系统并不是客户端操作系统下的本地磁盘文件系统,而是Web应用程序在客户端创建和管理的一个与页面相关联的沙盒文件系统。

概述

本地文件系统(Local FileSystem)API是通过FileSystem对象和window.requestFileSystem()方法来实现的。

Web应用程序可以通过调用window.requestFileSystem()来请求对一个沙盒文件系统的访问权限。调用requestFileSystem()会创建一个新的沙盒存储空间。成功调用之后会返回一个FileSystem对象。

代码示例请求文件系统

通过调用window.requestFileSystem()请求对沙盒文件系统的访问权限：

//浏览器的兼容性 window.requestFileSystem = window.requestFilsSystem || window.webkitRequestFileSystem; window.requestFileSystem(type, size, successCallback, opt_errorCallback);

下面对调用requestFileSystem()时传递的参数作个简单的介绍：

* type \\ 文件存储是否持久。可为PERSISTENT,TEMPORARY。通过TEMPORARY存储的数据可由浏览器自行决定删除。要请求PERSISTENT存储，必须获得用户或应用的明确授权，并需要用户向应用授予配额。 * size \\存储空间大小(以字节为单位)。 * successCallback \\ 文件系统请求成功时调用的回调函数。其参数为FileSystem对象。 * opt_errorCallback \\ 用于处理错误或获取文件系统的请求遭到拒绝时可选的回调。其参数为FileError对象。创建文件夹 fileSystem.root.getDirectory('Hudao', {create: true}, function(dirEntry) { console.log('The directory'name is '+ dirEntry.name); }, opt_errorCallback);

上面例子中，在根目录中创建一个文件夹。getDirectory()方法用来读和创建目录。该方法第一个参数可以传递一个名字或者路径来创建。

创建文件 fileSystem.root.getFile('hudao.txt', {create: true, exclusive: true}, function(fileEntry) { console.log('The file's name is '+fileEntry.name); }, opt_errorCallback);

上面例子中在根目录下创建一个空的文件hudao.txt。getFile()方法用来读和创建文件。

拷贝文件 function copy(currentDirec, srcEntry, destDir) { currentDirec.getFile(srcEntry, {}, function(fileEntry) { currentDirec.getDirectory(destDir, {}, function(dirEntry) { fileEntry.copyTo(dirEntry); }, errorHandler); }, errorHandler); } copy(fileSystem.root, 'hudao.txt', 'Documents/');

上面的例子拷贝hudao.txt从ROOT到Document目录下。

移动文件 function move(currentDirec, srcEntry, directoyName) { currentDirec.getFile(srcEntry, {}, function(fileEntry) { currentDirec.getDirectory(directoryName, {}, function(dirEntry) { fileEntry.moveTo(dirEntry); }, errorHandler); }, errorHandler); } move(fileSystem.root, 'hudao.txt', 'Documents/');

上面的例子是移动hudao.txt到Document的目录下。

重命名文件 function rename(currentDirec, srcEntry, newName) { currentDirec.getFile(srcEntry, {}, function(fileEntry) { fileEntry.moveTo(currentDirec, newName); }, errorHandler); } rename(fileSystem.root, 'hudao.txt', 'hudaokeji.txt');

上面的例子是将hudao.txt重命名成hudaokeji.txt。

参考

相关页面

lfsAPI

外部链接

文件系统API的基本概念-MDN

WebAPI客户端存储之DOM存储

Web API

1 发布

概述

DOM存储(Storage)API是通过sessionStorage对象和localStorage对象来实现的。通过这些对象，WEB应用程序能够把信息存储到客户端，并再以后需要的时候进行获取。

其中：

sessionStorage
会话存储，其中的数据在页面会话结束时会被自动清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。localStorage
本地存储，其中的数据没有过期时间，在页面会话结束时不会被自动清除。

DOM存储与cookie的相同点：

提供了把数据保存到本地的能力，页面刷新或者关掉浏览器后，数据依然存在。只能存字符串数据。

DOM存储与cookie的不同点：

存储容量大。虽然不同浏览器的标准可能不一样，主流的一般都在5~10M，远超cookie的4k。数据不会自动发送到服务器，与cookie相比，节省带宽，加快响应速度代码示例浏览器支持检测

通过以下代码可以事先检测浏览器是否支持本API。

if(window.Storage) { //支持此API } else { //不支持此API }

存取数据

使用本地DOM存储

var loSt = window.localStorage; loSt['username'] = 'hudao'; loSt.setItem('jobName', 'wrting'); console.log(loSt.length); //2 console.log(loSt.username + ' job is ' + loSt.jobName); //hudao job is wrting loSt['jobName'] = 'singer'; console.log(loSt.username + ' job is ' +loSt.jobName); //hudao job is singer delete loSt['jobName'];

使用会话DOM存储

sessionStorage.setItem('company', 'Hudao');

上面代码表示访问当前域名的会话DOM存储对象，并使用setItem()访问往里面添加一个数据条目。

//获得填充公司名称的文本输入框 var company = document.getElementByid('company'); //检测是否存在company键值 if(sessionStorage.getItem('company')) { //将文本框中的值设置成sessionStorage中的company键值 company.value = sessionStorage.getItem('company'); } //添加监听文本输入框的change事件 company.addEventListener("change", function(){ //将文本框的值保存到sessionStorage中的company键值 sessionStorage.setItem("company", company.value); }); 捕获存储异常

不同的浏览器，分配给本地存储的空间是不一样的,该存储的空间是整个子域共享的。

如果当本地存储满了，再进行写数据，将会触发error，因此有时需要捕捉调用setItem()时的错误。

try{ localStorage.setItem('name', 'hudao'); }catch(e){ console.log('It's cant't write!'); } 清空存储

调用clear()方法将会清空整个域的数据，包括和当前页面共享一个存储空间的其他页面。

localStorage.clear(); sessionStorage.clear();

WebAPI客户端存储之Cookie

Web API

1 发布

概述

Cookie API是通过document.cookie属性来实现的。cookie是存储在访问者的计算机中的变量,与页面相关联。

cookie包含在HTTP协议中,服务器端程序可以为页面创建或更新cookie值,通过HTTP请求回送给客户端,浏览器则会将cookie值自动保存起来, 再次请求该页面时，浏览器会自动把与该页面相关联的所有cookie值放到HTTP请求中一起发送给服务器。

因为cookie能被自动处理这个特点,服务器端WEB应用程序的Session ID通常就是放在cookie里进行保存的。

格式每个cookie的格式：<cookie名>=<值>；名称和值都必须是合法的标志符。大小限制 cookie是有大小限制的，每个cookie所存放的数据不可超过4kb，如果cookie字符串的长度超过了4kb，则该属性将返回空字符串。有效期限 cookie是存在有效期的。在一般情况下，一个cookie的生命周期就是在浏览器关闭的时候结束。如果希望cookie能在浏览器关掉之后还能够使用，就必须要为该cookie设置有效期。域和路径 cookie存在域和路径的概念。域就是domain的概念，因此不同的域之间不能互相访问cookie。路径就是path的概念，一个网页所创建的cookie只能被与这个网页在同一目录或子目录下的所有网页访问。代码示例简单的存取操作 document.cookie = 'username=Hudao';

以上代码中的'username'表示cookie名称，'Hudao'表示表示这个名称对应的值。假设cookie名称并不存在，那么就是创建一个新的cookie；若存在，则修改这个cookie名称对应的值。如果要多次创建cookie，重复此方法即可。

设置有效期

在默认情况下，cookie会在浏览器关闭的时候消除，但可通过expires来设置cookie的有效期。语法如下：

document.cookie = "name=Hudao;expires=date";

上面的代码中的date值为GMT(格林威治时间)格式的日期型字符串，生成方式如下：

var _date = new Date(); _date.setDate(_date.getDate()+30); _date.toGMTString();

上面的代码可解释为：

通过new生成一个Date的实例，得到当前的时间。getDate()方法得到当前本地月份中的某一天，接着加上30就是此cookie可在本地保存30天。通过setDate()方法来设置时间；用toGMTString()方法把Date对象转换为字符串，并返回结果参考

相关页面

外部链接

Document.cookie-MDN

WebAPI多媒体之视频

Web API

1 发布

在HTML5 Web中我们可以很方便的使用原生API来操作视频文件。

示例播放视频

首先来看一下视频的例子

<video>标签的属性：

width：视频的宽度height：视频的高度poster：视频的替代图片，指定在视频加载完之前显示的图片controls：是否适用原生的视频控制UIpreload：是否预加载视频autoplay：是否自动播放视频loop：是否循环播放tabindex：是否适用键盘控制播放

<video>标签的嵌套标签：

<source>：视频文件地址描述标签，指明地址与格式<track>：视频信息描述标签使用CSS与JavaScript增强视频的展现

<video>标签和其它HTML元素一样，可以通过为其附加事件，如拖动、鼠标、焦点事件等，来处理相关操作。同时也能使用常规的css规则来定制视频的样式

比如下面的代码为video附加一个canplay的事件

video.addEventListener("canplay", function(e) { this.volume = 0.6; this.currentTime = 1; this.play(); }, false);

视频的属性，方法以及事件：属性： * currentTime：当前播放的时间 * volume：当前的音量 * muted：返回视频是否应该被静音 * playbackRate：播放速度 * currentSrc：当前播放视频的地址 * videoWidth & videoHeight：视频的宽和高

方法：

load：重新加载视频play：播放pause：暂停canPlayType：判断所给类型的视频格式是否支持addTextTrack：向视频添加新的文本轨道。

其他属性参照http://techbrood.com/jsref?p=dom-obj-video 事件：

canPlaythrough：当浏览器认为可以完全播放当前视频时触发ended：视频结束时触发error：视频播放出错时触发playing：视频播放时触发（刚开始播放或者暂停后再播放）progress：加载视频时触发waiting：一个操作在等另一个操作时触发loadedmetadata：当浏览器加载完元数据时触发

其他具体事件可参看https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events

与其他标签配合增强功能 canvas

使用canvas可以很方便的在视频里导出导入图片。比如截屏功能可以这样实现：

function grabScreenshot() { var canvas = document.createElement("canvas"), ctx = canvas.getContext("2d"); ctx.drawImage(video, 0, 0, videoWidth, videoHeight); var img = new Image(); img.src = canvas.toDataURL("image/png"); img.width = video.width; container.appendChild(img); } SVG

使用SVG为视频添加蒙层，比如：

GL

@GL