JS——BOM(History对象)

时间：2020-01-21 18:12:26 阅读：81 评论：0 收藏：0 [点我收藏+]

标签：bsp asc 运行列表 title ref onclick script col

1、history.back()，加载历史列表中的前一个 URL：

（1）运行程序先进入此页面，点击文字链接后进入下一个页面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a href="History对象.html">请点击进入下一个页面</a>
    </body>
</html>

技术图片

（2）点击返回上一级按钮可以再次回到第一个页面：

技术图片

代码如下：

go()：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>History对象</title>
        <script>
            function fanhui(){
                history.go(-1);
            }
        </script>
    </head>
    <body>
        <input type="button" value="返回上一页" onclick="fanhui()"/><br />
    </body>
</html>

back()：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>History对象</title>
        <script>
            function fanhui(){
                history.back();
            }
        </script>
    </head>
    <body>
        <input type="button" value="返回上一页" onclick="fanhui()"/><br />
    </body>
</html>

这两个方法是等效的。

2、 history.forward()方法，加载历史列表中的下一个 URL

先设置三个页面：

页面一：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h2>这是第一个页面</h2>
        <a href="2.html">我是第一个页面，请点击！</a>
    </body>
</html>

页面二：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>History对象</title>
        <script>
            function fanhui(){
                history.go(1);
            }
        </script>
    </head>
    <body>
        <h2>这是第二个页面</h2>
        <input type="button" value="进入下一个页面" onclick="fanhui()"/><br />
        <a href="3.html">进入第三个页面</a>
    </body>
</html>

当然，可以用history.forword()方法，效果是一样的。

页面三：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h2>这是第三个页面</h2>
        <input type="button" value="跳转到第二个页面" onclick="javascript:location.href=‘2.html‘"/>
    </body>
</html>

先进入第一个页面：

技术图片