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中的历史纪录数不增加
参考链接: