Posts - 7, Articles - 0, Comments - 2

2016-06-29 23:11 by Young Dreamer, ... 阅读, ... 评论, 收藏,编辑

history是HTML5的新特性，我们可以使用它操作这个历史记录堆栈。

（1）history提供了对浏览器历史纪录堆栈的读取，同时实现在访问记录中的前进和后退；

history.length

历史记录堆栈的长度

back,forward,go;

window.history.back;效果等同点击了浏览器工具栏上的返回键；

window.history.forward;效果等同点击了浏览器工具栏上的前进键；

window.history.go;移动到历史记录中特定的位置,window.history.go(-1)等同back，window.history.go(1)等同forward

（2）history提供修改历史纪录堆栈的方法

history.pushState(stateObj, title, urlParams)

用于添加历史纪录，通过stateObj来标记该记录，可以通过history.state来读取验证；如果urlParams有值的话，url会加上相应的hash值，但是该行为并不会触发hashchange和页面的刷新；

举个例子：

假设http://www.baidu.com/foo.html页面执行以下代码，

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

此时url地址栏显示http://www.baidu.com/bar.html，但浏览器不会加载bar.html页面，即使这个页面存在也不会加载。

然后访问http://www.qq.com，然后点击后退。这时，url地址栏将会，http://www.baidu.com/bar.html，通过history.state读取状态对象，该状态对象为{foo: "bar" }

最后再次点击后退，URL将变成http://www.baidu.com/foo.html，通过history.state读取状态对象，该状态对象为null。这次的返回动作并没有改变文档的内容。

history.replaceState(stateObj, title, urlParams)

用于修改当前的state，而不是添加一个新的历史记录；

（3）popstate事件

前进、后退，push state，replaceState将触发该事件，事件对象的state属性获取history.state对象的copy；

相关tips：

（1）当页面加载时，它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。

（2）onload之间通过location.href进行跳转，则history中的历史纪录数不增加