JavaScript中的history

history是用来封装访问页面历史记录（地址）
第一个页面（主页面）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>history主页面</title>
        <!--history学习
        history是用来封装访问页面历史记录（地址）
        history.back()---回退一个页面，相当于浏览器左上角的回退箭头
        history.forward()---前进一个页面，相当于浏览器左上角的前进箭头
        history.go()：传一个整数位参数
                  1.正整数：向前跳指定页面的个数
                  2.负整数：向后跳指定页面的个数




        -->
        <script type="text/javascript">
            function testBack(){
                history.back();
            }
            function testForward(){
                history.forward();
            }
            function testGo(){
                history.go(1);
            }

        </script>

    </head>
    <body>
        <h1>history主页面</h1>
        <a href="history.html">去往history页面</a>
        <input type="button" value="点我测试back" onclick="testBack()"/><br />
        <input type="button" value="点我测试forward" onclick="testForward()"/><br />
        <input type="button" value="点我测试go" onclick="testGo()"/><br />


    </body>
</html>

第二个页面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <script type="text/javascript">
            function testForward(){
                history.forward();
            }
            function testGo1(){
                history.go(-1);
            }
        </script>
    </head>
    <body>
        <h1>我是history</h1>
        <a href="mainHistory.html">去往History主页面</a><br />
        <input type="button" value="点我测试forward" onclick="testForward()"/><br />
        <input type="button" value="点我测试go1" onclick="testGo1()"/><br />

    </body>
</html>

第一个页面（history主页面）效果：
这里写图片描述
第二个页面（我是history页面）效果：

在第二个页面（我是history页面）中点击“去往History主页面”的链接会跳转到第一个页面（history主页面），然后点击第一个页面（history主页面）中的“点我测试back”按钮或者“点我测试forward”会回到第二个页面（我是history页面），在第二个页面（我是history页面）中点击“点我测试forward”按钮会回到第一个页面（history主页面）……

JavaScript中的history

猜你喜欢