JS history对象的使用

JS 中的 history 对象包含用户在浏览器窗口中访问过的 URL，它是 window 对象的一个对象类型的属性，可通过 window.history 属性对其进行访问，使用时也可以省略 window。

history 对象最初设计时用于表示窗口的浏览历史。但出于隐私方面的原因，history 对象不再允许脚本访问已经访问过的 URL。

现在可用的方法主要有 back()、forward()、go()、pushState() 和 replaceState()，其中，pushState() 和 replaceState() 是新增的方法，在主流浏览器上的一些较新版本（如 IE10+）上才可以用。

JS history对象属性

history 对象的属性主要是 length，该属性用于返回浏览器历史列表中的 URL 数量。

JS history对象方法

history 对象的常用方法见表1。

表1：history 对象的常用方法

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go(number)	加载 history 列表中的某个具体页面。 参数 number 是要访问的 URL 在 history 的 URL 列表中的相对位置，可取正数或负数。在当前页面前面的 URL 的位置为负数（如在前一个页面的位置为 -1），反之则为正数。
pushState(state,title,url)	添加指定的 url 到历史记录中，并且刷新将地址栏中的网址更新为 url。
replaceState(state,title,url)	使用指定的 url 替换当前历史记录，并且无需刷新浏览器就会将地址栏中的网址更新为 url。

pushState() 和 replaceState() 两个方法中的参数说明如下：

• state 参数：与第三个参数 url 相关的状态对象。当同一个文档的浏览历史出现变化触发 popstate 事件时，该对象会传入回调函数。如果不需要这个对象，可将其设置为 null。
• title 参数：新页面的标题，目前这个参数在所有浏览器中并没有效果，所以可将其设置为 null。

访问history对象的属性和方法的方式

具体格式如下：

[window.]history.属性
[window.]history.方法(参数1,参数2,…)

JS history对象的使用示例

请看下面的代码：

history.back();//等效单击后退按钮
history.forward();//等效单击前进按钮
history.go(-1);//等效单击一次后退按钮,与history.back()功能等效
history.go(-2);//等效单击两次后退按钮
history.pushState(null,null,"test1.html");
history.replaceState(null,null,"test2.html");

假设当前页面的 URL 为 test.html，则在当前页面中存在上述示例中的最后两条代码。

假设 test1.html、test2.html 和 test.html 保存在同一目录下，则浏览器运行 test.html 文件时，当执行完 test.html 文件中的 pushState() 方法后，地址栏中的网址将会在没有刷新浏览器的情况下更改为 test1.html，同时历史记录中将会存在 test.html 和 test1.html 两条历史记录；而当执行完 replaceState() 方法后，地址栏中的网址将会在没有刷新浏览器的情况下更改为 test2.html。