history

history 对象

back() 返回到历史记录上一个页面
forward() 返回到历史记录下一个页面
go() 返回到历史记录多步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<a href="14.history.html">页面1</a>
<a href="14.history_2.html">页面2</a>
<a href="14.history_3.html">页面3</a>   
<div>这是页面1</div>
<button id="btn">按钮</button> 
<script>
    
</script> 
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<a href="14.history.html">页面1</a>
<a href="14.history_2.html">页面2</a>
<a href="14.history_3.html">页面3</a>
<div>这是页面2</div>
<button id="btn">按钮</button>   
<script>

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<a href="14.history.html">页面1</a>
<a href="14.history_2.html">页面2</a>
<a href="14.history_3.html">页面3</a>
<div>这是页面3</div>
<button id="btn">按钮</button>   
<script>
{
    let btn = document.querySelector("#btn");
    btn.onclick = function(){
        history.back();
    };
}
</script>
</body>
</html>

history.back()；返回到历史记录上一个页面
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<a href="14.history.html">页面1</a>
<a href="14.history_2.html">页面2</a>
<a href="14.history_3.html">页面3</a>   
<div>这是页面1</div>
<button id="btn">按钮</button> 
<script>
{
    let btn = document.querySelector("#btn");
    btn.onclick = function(){
        history.forward();
    };
}
</script> 
</body>
</html>

history.forward()；返回到历史记录下一个页面
在这里插入图片描述

history.go(num)；返回到历史记录多步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<a href="14.history.html">页面1</a>
<a href="14.history_2.html">页面2</a>
<a href="14.history_3.html">页面3</a>
<div>这是页面3</div>
<button id="btn">按钮</button>   
<script>
{
    let btn = document.querySelector("#btn");
    btn.onclick = function(){
        // history.back();
        history.go(-2);
    };
}
</script>
</body>
</html>

直接回退两步，如果正数则前进多步
在这里插入图片描述

（后续待补充）

溜_x_i_a_o_迪

发布了34 篇原创文章 · 获赞 12 · 访问量 2512

私信关注

BOM学习实用路线（6）——BOM之history

history

history 对象

猜你喜欢