history对象常用方法

2024-01-07 21:56:08

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>

文章来源:https://blog.csdn.net/weixin_69026046/article/details/135444347
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。