从HTML5开始,我们可以开始操作这个历史记录堆栈。
1.History
使用back(),forward(),和go()方法可以在用户的历史记录中前进和后退
前进和后退
后退:
window.history.back();
这个方法会像用户点击了浏览器工具栏上的返回键一样。
同样的,也可以用以下方法产生用户前进行为:
window.history.forward();
移动到历史记录中特定的位置
你可以使用go()方法从session历史中载入特定的页面。
向后移动一页:
window.history.go(-1);
向前移动一页:
window.history.go(1);
类似的,你可以前进或者后退多页。
还可以通过检查浏览器历史记录的length属性来找到历史记录堆栈中的页面总数。
var numberOfEntries = window.history.length;
注意:IE支持向go()方法传URL参数。
2.添加和修改history实体
自Gecko2开始引入 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5引入了histtory.pushState()和history.replaceState()这两个方法,他们允许添加和修改history实体。同时,这些方法会和window.onpostate事件一起工作。
使用history.pushState()方法来修改referrer,这种方法可以被用在经过修改状态后而为xmlhttpRequest对象创建的http header中。这个referrer会是创建XMLHttpRequest 时document的URL。
pushState 用于向 history 添加当前页面的记录,而 replaceState 和 pushState 的用法完全一样,唯一的区别就是它用于修改当前页面在 history 中的记录。
例子
假设http://mozilla.org/foo.html页面执行了一下JS
var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");
这种方法将会使url地址栏显示http://mozilla.org/bar.html,但浏览器不会加载bar.html页面,即使这个页面存在也不会加载。