JS中BOM的History对象的用法（length属性、back()、forward()、go()）_history 跳转页面再goback length变化-优快云博客

本文链接：https://blog.youkuaiyun.com/Fantasc/article/details/119701177

本文介绍了JavaScript中的History对象，包括length属性、back()、forward()和go()方法。length属性返回当前会话的历史记录条目数，back()函数相当于浏览器的回退按钮，forward()用于前进，go()则允许指定跳转页面。为了实践这些概念，可以通过创建多个页面并设置超链接来尝试代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

History:可以用来操作浏览器，使其向前或向后翻页

length属性可以获取到当次访问链接的数量
```
alert(history.length);
```
back(),可以回退到上一个页面，作用和浏览器的回退按钮一样。
```
history.back();
```
forward()，可以跳转到下一个页面，作用和浏览器的前进按钮一样。
```
history.forward();
```
go()，可以用来跳转打指定的页面，需要一个整数作为参数，1表示向前跳转一个页面，2表示向前跳转两个页面，以此类推。-1表示向后跳转一个页面，-2表示向后跳转两个页面，以此类推。
```
history.go(1);
```

在用一下代码进行调试的时候需要自己创建两个页面，并设置相应的超链接进行页面跳转，练习代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        // alert(history.length);
        window.onload = function(){
            var forward = document.getElementById("forward");
            var back = document.getElementById("back");

            go.onclick = function(){
                history.forward();
            };
            back.onclick = function(){
                history.back();
            };
        };
    </script>
</head>
<body>
    <h1>History界面</h1>
    <button id="forward">点击前进</button>
    <button id="back">点击后退</button>
    <a href="历史1.html">去历史1</a>
</body>
</html>