通过haschange事件，可以知道URL的参数什么时候发生了变化，也就是什么时候该有所反应。通过状态管理的API，能够在不加载新页面的情况下改变浏览器的URL。所以需要使用history.pushState()方法。history.pushState()方法接收三个参数：1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)。小例子如下
执行了history.pushState()方法后，新的状态信息就会被加入到历史状态栈，而浏览器地址栏也会变成新的相对URL。但是，浏览器并不会想服务器发送请求，即使历史状态改变之后查新location.href也会返回与地址栏中相同的地址。另外，第二个参数目前还没有浏览器实现，所以完全可以只传入一个空字符串即可，或者一个短标题也可以。第一个参数则应该尽可能提供初始化页面状态所需的各种信息。
因为history.pushState()方法会创建新的历史状态，所以会发现”后退”按钮也可以使用了。按下”后退”按钮，会触发window对象的popstate事件。Popstate事件的事件对象有一个state属性，这个属性就包含着当初以第一个参数传递给pushState()的状态对象。小例子如下
更新状态直接更新当前地址栏的内容，他不会产生后退 *** 作，只是单纯修改当前地址。
要更新当前历史状态，可以调用replaceState()，传入的参数与pushState()方法的前两个参数相同。调用replaceState()不会在历史状态栈中创建新状态，只会重写当前状态。小例子如下
网上例子：
他这个还是创建了一个数组，然后把生成的内容存到数组中，在根据传的值
把数组对应的内容给读出来。
history有个问题是第一次点击是无效的，只有第二次才能起作用。这就非常的不爽了。
通常我们也不会需要他执行特别复杂的 *** 作，反而是hash非常的好用。
hash是直接在url后面加一个#，然后立即可以被onpopstate事件检测到。
于是我们可以这样去做：
性能&集成
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.length1
添加和修改历史记录条目
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 html><html><body>
<div contenteditable="true">
This text can be edited by the user. </div>
</body></html>12345678
拖放
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：会在加速度发生改变时触发。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）