什么是HTML5（三）：性能&集成，设备访问

性能集成

十余年的滨海网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整滨海建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“滨海网站设计”,“滨海网站推广”以来，每个客户项目都认真落实执行。

web workers

Web Worker 是HTML5标准的一部分，这一规范定义了一套 API，它允许一段JavaScript程序运行在主线程之外的另外一个线程中。

一般情况下，当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

History API

window 对象通过history对象提供对浏览器历史记录的访问能力。它暴露了一些非常有用的方法和属性，让你在历史记录中自由前进和后退，而在HTML5中，更可以操纵历史记录中的数据。

概览

可以通过back()，forward()和go()方法在用户的历史记录中前进与后退。

要在历史记录中前进和后退，只需要这样做：

window.history.back(); //后退window.history.forword(); //前进12

而利用go（）方法，通过指定一个相对于当前页面位置的数值，可以从当前会话的历史记录中加载页面（当前页面索引值为0，上一页为-1，下一页为1）

window.history.go(-1); //后退一页，相当于back（）window.history.go(1);  //向前移动一页（相当于调用forward()）12

你可以查看length属性值，了解历史记录栈中一共有多少页：

var numberOfEntries = window.history.length;1

添加和修改历史记录条目

HTML5引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate事件一起工作。

例子： 

假设 hfoo.html 将执行如下JavaScript代码：

var stateObj = { foo: "bar" };

history.pushState(stateObj, "page 2", "bar.html");12

这将让浏览器的地址栏显示tml，但不会加载bar.html页面也不会检查bar.html是否存在。

假设现在用户导航到了com，然后点击了后退按钮，此时，地址栏将会显示har.html，并且页面会触发popstate事件，该事件中的状态对象（state object）包含stateObj的一个拷贝。该页面看起来像foo.html，尽管页面内容可能在popstate事件中被修改。

如果我们再次点击后退按钮，URL将变回hoo.html，文档将触发另一个popstate事件，这次的状态对象为null。回退同样不会改变文档内容。

pushState（）方法 

此方法有三个参数：

状态对象（state object）：一个js对象，与用pushState()方法创建的新历史记录条目关联。

标题（title）：FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。

地址（URL）：新的历史记录条目的地址。 

浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。 

新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准； 

传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。 

该参数是可选的；不指定的话则为文档当前URL。

replaceState（）方法 

history.replaceState()操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。

popstate事件 

每当激活的历史记录发生变化时，都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建，或是被replaceState方法影响到的，popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

contenteditable属性

在HTML5中,通过设置contenteditable属性，任何元素都是可编辑的.，可以瞬间把你的网站变成wiki！

!DOCTYPE htmlhtml

body

div contenteditable="true"

This text can be edited by the user.    /div

/body/html12345678

拖放

HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。

拖放会触发一系列拖放事件：dragstart、dragenter、dragover、dragleave等。

焦点管理

支持新的 HTML5 activeElement 属性和 hasFocus 方法。

activeElement

document.activeElement：返回当前页面中获得焦点的元素，只读。

很多情况下,该属性会返回一个input或者textarea元素,于此同时,如果用户在文本输入框中选中了一些文本,还可以使用该元素的selectionStart和selectionEnd属性获得准确的选中文本内容.

该属性的值还可能是一个select元素(下拉菜单)或者type属性为button,checkbox或radio的input元素.

通常,用户可以通过Tab键来在页面中可以获得焦点的那些元素中切换,然后按下空格键激活这个元素

如果没有某个元素获得焦点,则该属性的值为当前页面中的body元素. 

截至目前只有firefox3.6支持。

hasFocus（）

document.hasFocus() 方法返回一个 Boolean，表明当前文档或者当前文档内的节点是否获得了焦点。

设备访问

使用camera API

可以参考什么是HTML5（二）中相关部分。

触摸事件

略

使用地理位置定位

地理位置 API 允许用户向 Web 应用程序提供他们的位置。出于隐私考虑，报告地理位置前会先请求用户许可。

地理位置 API 通过 navigator.geolocation 提供。

获取当前定位

可以调用 getCurrentPosition() 函数获取用户当前定位位置。 

这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。当定位被确定后，定义的回调函数就会被执行。

navigator.geolocation.getCurrentPosition(function(position) {

do_something(position.coords.latitude, position.coords.longitude);});123

检测设备方向

越来越多支持web功能的设备拥有检测自身方向的能力了；也就是说，这些设备可以记录下其受地心引力作用下而在方向上产生变化的数据。

有两种js事件负责处理方向信息。

DeviceOrientationEvent：会在加速度传感器检测到设备在方向上发生变化时触发。

DeviceMotionEvent：会在加速度发生改变时触发。

如何在Xendesktop7中配置Html5访问虚拟桌面

步骤一：在Citrix StoreFront里启用 Receiver for HTML5

请跟随如下步骤在XenDesktop7环境中启用Receiver for HTML5。您需要登录您的Delivery Controller并使用Citrix StoreFront management console，当然你也可以从Citrix Studio或者Citrix StoreFront console里进行。打开Citrix Studio management console，点击Receiver for Web。

在中间窗格里，确保选择了您想要的Store。

在右边的窗格中，在Actions Store Web Receiver 点击Deploy Citrix Receiver。

开启Receiver for HTML5有三个选项：

Install locally

Use Receiver for HTML5 if local install fails

Always use Receiver for HTML5

选择Use Receiver for HTML5 if local install fails。

步骤二：在Citrix Studio里启用ICA WebSockets 连接策略。

在Citrix Studio配置完成后，在Citrix Studio management console里按照如下步骤开启WebSockets策略。这里，您可以查看相eDocs：Modify an existing (default) policy。

在Citrix Studio里打开Policies。

在中间的窗格里，在Policies下修改现有的策略或者新建一个策略。

在右边的窗格点击Actions Edit Policy…。

在Edit Unfiltered窗口中输入“WebSockets”并轻击回车。您可以找到3条与WebSockets相关的策略设置。点击每一条后面的Select。

如何html5在浏览器里访问手机后置摄像头

1）获取视频流

添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源

var video = document.getElementByIdx_x_x("video");

navigator.getUserMedia({video:true}, function (stream) {

video.src = window.webkitURL.createObjectURL(stream);

}, function (error) { alert(error); });

2）拍照

关于拍照功能，采用HTML5的Canvas实时捕获Video标签的内容，Video元素能作为Canvas图像的输入

function scamera() {

var videoElement = document.getElementByIdx_x_x('video');

var canvasObj = document.getElementByIdx_x_x('canvas1');

var context1 = canvasObj.getContext('2d');

context1.fillStyle = "#ffffff";

context1.fillRect(0, 0, 320, 240);

context1.drawImage(videoElement, 0, 0, 320, 240);

}

3）图片获取

要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像

var imgData=canvas.toDataURL(“image/png”);

imgData格式如下：”data:image/png;base64,xxxxx“

真正图像数据是base64编码逗号之后的部分

转载，仅供参考。

当前文章：html5访问,html5链接
分享URL：http://scpingwu.com/article/dsdhgjs.html