js History对象

喵俺第一专栏

已于 2022-01-29 23:22:27 修改

阅读量599

点赞数

分类专栏： # Html+css+js项目文章标签： javascript 前端开发语言

于 2022-01-29 22:49:55 首次发布

本文链接：https://blog.csdn.net/dengfengling999/article/details/122748647

版权

Html+css+js项目专栏收录该内容

31 篇文章 2 订阅

订阅专栏

知识点：

Length属性可以获取到当前链接的数量

Back（）方法可以用来回退到上一个页面，作用和浏览器的回退按钮一样

Forward（）方法可以跳转到下一个页面，作用和浏览器的前进按钮一样

go（）可以用来跳转到指定的页面它需要一个整数作为参数 1.代表向前跳转一个页面

2.代表向前跳转两个页面 -1表示向后跳转一个页面 -2表示向后跳转两页面

1先创建test01页面，详细代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>TEST01</h1>
    <a href="test02.html">去test02</a>
</body>

</html>

结果：点击可跳转到test02页面

2在创建test02页面详细代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=h1, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>TEST02</h1>
    <a href="History.html">去History.html</a>
</body>

</html>

结果：点击可跳转到test02页面

3在创建History页面，详细代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
          History对象可以用来操作浏览器向前向后翻页
        */

        window.onload = function () {
            //获取按钮对象
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                //length()属性，可以获取到当前访问的连接数量
                alert(history.length);
                //back（）方法可以用来回退到上一个页面，作用和浏览器的回退按钮一样
                //history.back();

                //Forward（）方法可以跳转到下一个页面，作用和浏览器的前进按钮一样
                // history.forward();

                //go（）可以用来跳转到指定的页面它需要一个整数作为参数 
                history.go(-2);
            };
        };
    </script>
</head>

<body>
    <button id="btn">点我一下</button>
    <h1>History</h1>
    <a href="https://www.baidu.com/">去百度</a>

</body>

</html>

结果：history.go(-2);点击向后退两个页面

喵俺第一专栏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js History对象

知识点：Length属性可以获取到当前链接的数量Back（）方法可以用来回退到上一个页面，作用和浏览器的回退按钮一样Forward（）方法可以跳转到下一个页面，作用和浏览器的前进按钮一样go（）可以用来跳转到指定的页面它需要一个整数作为参数 1.代表向前跳转一个页面2.代表向前跳转两个页面 -1表示向后跳转一个页面 -2表示向后跳转两页面1先创建test01页面，详细代码如下：<!DOCTYPE html><html lang="en">&lt
复制链接

扫一扫