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

最新推荐文章于 2024-04-06 11:39:14 发布

溜_x_i_a_o_迪

最新推荐文章于 2024-04-06 11:39:14 发布

阅读量109

点赞数

分类专栏： Web前端 # JS-BOM 原生JavaScript 文章标签： html5 bom 前端 javascript js

本文链接：https://blog.csdn.net/u013946061/article/details/105470671

版权

原生JavaScript 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

Web前端

32 篇文章 0 订阅

订阅专栏

JS-BOM

7 篇文章 0 订阅

订阅专栏

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>