JS 返回上一级页面|极客笔记

JS 返回上一级页面

在Web开发中，有时候我们需要实现一个按钮或者链接，点击之后可以返回到上一个页面。这个功能通常可以通过JavaScript来实现，并且是非常简单的操作。在本文中，我们将详细介绍如何使用JavaScript来实现返回上一级页面的功能。

window.history 对象

在JavaScript中，我们可以通过 window.history 对象来实现浏览历史的操作。window.history 对象提供了一系列方法，可以让我们操作浏览器的历史记录，包括向前、向后以及返回上一级页面。

window.history.back() 方法

window.history.back() 方法可以使浏览器返回到上一个页面，相当于用户点击浏览器的后退按钮。这个方法可以很方便地实现返回上一级页面的功能。

示例代码如下：

<!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>返回上一级页面</title>
</head>
<body>
    <button onclick="goBack()">返回上一级页面</button>

    <script>
        function goBack() {
            window.history.back();
        }
    </script>
</body>
</html>

点击按钮后，页面会返回到上一个页面。

history.go() 方法

除了使用 window.history.back() 方法返回上一级页面外，我们还可以使用 history.go(-1) 方法来实现相同的效果。history.go() 方法接收一个参数，代表向前或向后浏览历史记录的步数。

示例代码如下：

<!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>返回上一级页面</title>
</head>
<body>
    <button onclick="goBack()">返回上一级页面</button>

    <script>
        function goBack() {
            history.go(-1);
        }
    </script>
</body>
</html>

点击按钮后，页面也会返回到上一个页面。