一、History对象

    1.History对象:window.history对象包含浏览器的历史(url)的集合。

    2.History方法:

      history.back()  与在浏览器点击后退按钮相同

      history.forward()  与在浏览器中点击按钮向前相同

      history.go()  进入历史中的某个页面   

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a href="index.html">跳转到index</a>
        <button id="btn" onclick="goIndex()">按钮</button>
        <script>
            function goIndex(){
                history.forward();
            }
        </script>
    </body>
</html>
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="btn" onclick="toTest()">按钮</button>
        <script>
            function toTest(){
                history.back();
            }
        </script>
    </body>
</html>

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a href="obindex.html">跳转</a>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form>
            <input type="text" id="userName" />
        </form>
        <button id="btn" onclick="safe()">按钮</button>
        <script>
            function safe(){
                var name = document.getElementById("userName").value;
                if(name == "hello"){
                    history.go(-1);
                }else{
                    alert("输入错误");
                }
            }
        </script>
    </body>
</html>