JavaScript学习笔记之history常用方法

最新推荐文章于 2023-12-30 22:32:55 发布

秋忆夏伤

最新推荐文章于 2023-12-30 22:32:55 发布

阅读量672

点赞数

本文链接：https://blog.csdn.net/qq_29331365/article/details/52515254

版权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    
    <!-- history对象：包含浏览器的历史（url）的集合 -->
    <!-- history方法：
         history.back()：后退一个页面。
         history.forward()：前面一个页面；必须要先从后一个页面退回来一次，才可以执行前进；
         history.go()：跳转到指定的页面。 -->

    <a href="test.html">跳转到下一个页面</a>    <!-- a标签跳转到下一个页面 -->
    <button id="btn" οnclick="forWord()">前进</button>

    <script>
        function forWord() {
            history.forward();      // 前进一个页面，就是a标签跳转到的页面。必须先跳转，才能前进。
        }
    </script>
</body>
</html>

test.html代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <button id="btn" οnclick="back()">后退</button><br/>
    <form>
        <input type="text" id="txt"/>
        <input type="button" id="btn2" value="跳转" οnclick="demo()"/>
    </form>
    <script>
        function back() {
            history.back(); // 后退一个页面
        }

        // history.back(-1)：直接返回当前页的上一页，数据全部消息，是个新页面;
        // history.go(-1)：也是返回当前页的上一页，不过退回到当前页的时候，表单里的数据全部还在;
        // history.back(0)：刷新; 
        // history.back(1)：前进; 
        // history.back(-1)：后退;

        function demo() {
            var name = document.getElementById("txt").value;
            if (name == "hello") {
                history.go(-1);     // history.go()：跳转到指定的页面。
            } else {
                alert("输入错误！");
            }
        }
    </script>
</body>
</html>

秋忆夏伤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记之history常用方法

 跳转到下一个页面前进 function forWord()
复制链接

扫一扫