首页 > 编程笔记 > JavaScript笔记 阅读:216

JS history对象的使用

history 对象包含用户在浏览器窗口中访问过的 URL,它是 window 对象的一个对象类型的属性,可通过 window.history 属性对其进行访问,使用时也可以省略 window。history 对象最初设计时用于表示窗口的浏览历史。

但出于隐私方面的原因,history 对象不再允许脚本访问已经访问过的 URL。现在可用的方法主要有 back()、forward()、go()、pushState() 和 replaceState(),其中,pushState() 和 replaceState() 是新增的方法,在主流浏览器上的一些较新版本(如 IE10+)上才可以用。

1. history对象属性

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

2. 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() 两个方法中的参数说明如下:

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

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

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

4. history对象的使用

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。

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章