history对象

本文总阅读量次

history历史对象

history 对象保存了用户在浏览器中访问页面的历史记录。

history对象的属性

  • length返回浏览器历史列表中的 URL数量

history对象的方法

回到历史记录的上一步

  • 语法：history.back（）
  • 功能：回到历史记录的上一步
  • 说明：相当于使用了history.go（-1）
  • 补充：使用history.go（-2）则是回到历史记录的上一步的再上一步
举例：
  1. index10.html里面给个超链接跳转到index11.html：
    1
    <a href="index11.html">跳转到index11.html</a>
  2. index11.html里给个后退按钮：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <body>
        <p>这是index11.html</p>
        <p><input type="button" id="btn" value="后退"></p>
        <script>
            var btn=document.getElementById("btn");
            btn.onclick=function(){
                history.back();
                //history.go(-1);
            }
        </script>
    </body>

回到历史记录的下一步

  • 语法：location.forward（）
  • 注意：千万不要忘记forward后面的括号
  • 功能：回到历史记录的下一步
  • 说明：相当于使用了history.go（1）
举例
  1. index11.html：有新增的2个按钮（前进，前进两个页面）和一个跳转index12.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
    <body>
        <p>这是index11.html</p>
        <p>
            <a href="index12.html">跳转到index12.html</a>
        </p>
        <p><input type="button" id="btn" value="后退"></p>
        <p><input type="button" id="btn2" value="前进"></p>
        <p><input type="button" id="btn3" value="前进2"></p>
        <script>
            var btn = document.getElementById("btn");
            var btn2 = document.getElementById("btn2");
            var btn3 = document.getElementById("btn3");

            btn.onclick = function () {
                // history.back();
                history.go(-1);
            }
            btn2.onclick = function () {
                history.forward();
                // history.go(1);
            }
            btn3.onclick = function () {
                history.go(2);
            }
        </script>
    </body>
  2. 做两个可供跳转的页面index12.html和index13.html，从12跳到13
    1
    2
    3
    4
    5
    6
    <body>
        <p>这是index12.html</p>
        <p>
            <a href="index13.html">跳转到index13.html</a>
        </p>
    </body>
    1
    2
    3
    <body>
            <p>这是index13.html</p>    
    </body>
  3. 跳到13以后再回到11去测试按钮

前进或者后退多步

  • 语法：history.go（-n）
  • 功能：回到历史记录的前n步
  • 语法：history.go（n）
  • 功能：回到历史记录的后n步