history对象(学习笔记)

最新推荐文章于 2022-07-30 13:16:51 发布

SpaceX7_s

最新推荐文章于 2022-07-30 13:16:51 发布

阅读量554

点赞数 1

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_45842954/article/details/122097613

版权

history定义

1.History 对象包含用户（在浏览器窗口中）访问过的 URL。
2.History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
3.实现两个页面的跳转效果

常见的方法：

forward() 加载historyl列表下一个URL
back() 加载history列表中上一个URL
go() 加载history列表指定的页面

<body>
    //href放着下一个页面的地址
    <a href="13-history2.html">跳转到列表页</a> 
    <button>前进</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            /* 
            History 对象包含用户（在浏览器窗口中）访问过的 URL。
            History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
            */
           //加载histroy前一个URL，相当于浏览器的顶部的前进按键
           //history是访问URL的记录，要先访问过 才可以调用history的方法
            // history.forward();
            //加载history中具体某个页面
            history.go(1)
        })
    </script>

<body>
   //href放着上一个页面的地址
    <a href="12-history对象.html">跳转到列首页</a> 
    <button>后退</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            /* 
            History 对象包含用户（在浏览器窗口中）访问过的 URL。
            History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
            */
           //加载histroy前一个URL，相当于浏览器的顶部的前进按键
            // history.back();
            history.go(-1);
        })
    </script>
</body>