History对象常用方法

@白天不懂爷的黑

已于 2024-01-08 16:54:37 修改

阅读量444

点赞数 10

文章标签： javascript 开发语言 ecmascript

于 2024-01-01 22:00:17 首次发布

本文链接：https://blog.csdn.net/qq_74095822/article/details/135329540

版权

文章目录

一、什么是History对象
- 1、history常用的对象属性
- 2、history对象常用方法
二、使用History对象
- 1、History.back()、History.forward()、History.go()
- 2、History.pushState()

一、什么是History对象

history 对象来保存浏览器历史记录信息，也就是用户访问的页面。浏览器的前进与后退功能本质上就是history的操作。history 对象记录了用户浏览过的页面，通过该对象提供的 API 可以实现与浏览器前进/后退类似的导航功能。

window.history 对象记录了浏览器的访问历史。为了保护用户隐私，对JavaScript访问该对象的方法做出了限制。

1、history常用的对象属性

属性	说明
history.length	返回历史列表中的网址数

2、history对象常用方法

方法	说明
back()	加载history列表中的前一个URL
forward()	加载history列表中的下一个URL
go()	加载history列表中的某个具体页面

二、使用History对象

1、History.back()、History.forward()、History.go()

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>history对象</title>
        <script type="text/javascript">
            function fun1(){
                window.history.forward()
            }
            function fun2(){
                window.history.back()
            }
            function fun3(){
                window.history.go(2)
            }
        </script>
    </head>
    <body>
        <input type="button" value="向前" onclick="fun1()" />
        <input type="button" value="向后" onclick="fun2()" />
        <input type="button" value="go" onclick="fun3()" />
        <a href="new_file.html" target="_blank">我来了</a>
    </body>
</html>

注意：
history.go(0)相当于刷新当前页面。

history.go(0); // 刷新当前页面

2、History.pushState()

History.pushState()方法用于在历史中添加一条记录。

window.history.pushState(state, title, url);

该方法接受三个参数，依次为：

state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null。
title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

假定当前网址是example.com/1.html，使用pushState()方法在浏览记录（History 对象）中添加一个新记录。

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

添加新记录后，浏览器地址栏立刻显示example.com/2.html，但并不会跳转到2.html，甚至也不会检查2.html是否存在，它只是成为浏览历史中的最新记录。这时，在地址栏输入一个新的地址(比如访问google.com)，然后点击了倒退按钮，页面的 URL 将显示2.html；你再点击一次倒退按钮，URL 将显示1.html。

总之，pushState()方法不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有反应。

总结：

window.history 属性指向 History 对象`，它表示当前窗口的浏览历史。当发生-改变时，只会改变页面的路径，不会刷新页面。
History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口一共访问过几个网址。
由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。
浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作

⭐最后⭐

🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获，友友们有任何问题可以在评论区留言

@白天不懂爷的黑

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
History对象常用方法

history 对象来保存浏览器历史记录信息，也就是用户访问的页面。浏览器的前进与后退功能本质上就是 history 的操作。history 对象记录了用户浏览过的页面，通过该对象提供的 API 可以实现与浏览器前进/后退类似的导航功能。window.history 对象记录了浏览器的访问历史。为了保护用户隐私，对JavaScript访问该对象的方法做出了限制。1、history常用的对象属性属性说明返回历史列表中的网址数2、history对象常用方法方法说明back()
复制链接

扫一扫