history对象常用方法

最新推荐文章于 2024-06-17 23:49:16 发布

船_.

最新推荐文章于 2024-06-17 23:49:16 发布

阅读量403

点赞数 6

文章标签：前端 javascript 开发语言 html

本文链接：https://blog.csdn.net/weixin_69026046/article/details/135444347

版权

window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

history.back( )	后退功能
history.forward( )	前进功能
go(参数）	前进后退功能，如果是1，就前进一个页面；-1就后退一个页面

示例：

创建3个页面，第二个页面来实现前进和后退功能

history1页面

<!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>history1.html</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        div{
            width:200px;
            height:100px;
            color:red;
            border:1px solid purple;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <div>我是history1.html页面</div>
    <a href="history2.html">跳转到history2.html页面</a>
</body>
</html>

history2页面

<!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>history2.html</title>
</head>
<body>
    <a href="history3.html">history3.html</a>
    <input type="button" name="" id="" value="后退一步" onclick="goback()">
    <input type="button" name="" id="" value="前进一步" onclick="gofoward()">
 
    <script>
        //页面后退一步
        function goback(){
            //history.back();
            history.go(-1);
        }
        //页面前进一步
        function gofoward(){
            //history.foward();
            history.go(1);
        }
    </script>
</body>
</html>

history3页面

<!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>history3.html</title>
</head>
<body>
    <h2>我是history3.html页面</h2>
    <script>
        for(var i=0;i<5;i++){
            for(var j=0;j<5-i;j++){
                document.write('♥');
            }
            document.write('<br>');
    }
    </script>
</body>
</html>