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

最新推荐文章于 2021-06-04 22:38:32 发布

gigi就是我

最新推荐文章于 2021-06-04 22:38:32 发布

阅读量832

点赞数

分类专栏：这个是啥 html 文章标签： html5 html

本文链接：https://blog.csdn.net/crystal6918/article/details/53584117

版权

html 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

这个是啥

11 篇文章 0 订阅

订阅专栏

性能&集成

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(); //前进

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

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

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

var numberOfEntries = window.history.length;

添加和修改历史记录条目

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

例子：
假设 http://mozilla.org/foo.html 将执行如下JavaScript代码：

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

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

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

如果我们再次点击后退按钮，URL将变回http://mozilla.org/foo.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 html>
<html>
  <body>
    <div contenteditable="true">
      This text can be edited by the user.
    </div>
  </body>
</html>

拖放

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);
});

检测设备方向

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

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

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

gigi就是我

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
什么是HTML5（三）：性能&集成、设备访问

性能&集成web workersWeb Worker 是HTML5标准的一部分，这一规范定义了一套 API，它允许一段JavaScript程序运行在主线程之外的另外一个线程中。一般情况下，当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取
复制链接

扫一扫