js怎样控制浏览器前进、后退、页面跳转？

本文链接：https://blog.youkuaiyun.com/BANaanaa/article/details/143170492

在 JavaScript 中，您可以使用 window.history 对象来控制浏览器的前进、后退和页面跳转功能。下面是如何使用这些功能的详细说明：

1. 前进与后退

通过这些方法，您可以有效地控制浏览器的前进、后退和页面跳转功能。

后退: 使用 window.history.back() 方法来使浏览器回到上一页面。

前进: 使用 window.history.forward() 方法来使浏览器前进到下一页面（如果有的话）。

// 返回上一页
function goBack() {
    window.history.back();
}

// 前进到下一页
function goForward() {
    window.history.forward();
}

2. 页面跳转

跳转到特定的历史记录条目: 您可以使用 window.history.go(n) 方法，其中 n 是一个整数，表示跳转的历史记录条目。正数表示前进，负数表示后退。例如，-1 表示回到上一页，1 表示前进一页。

// 跳转到上一页
function goToPreviousPage() {
    window.history.go(-1);
}

// 跳转到下一页
function goToNextPage() {
    window.history.go(1);
}

// 跳转到特定的历史记录位置
function goToSpecificPage(n) {
    window.history.go(n); // n 是一个整数
}

3. 页面重定向

如果您想要直接跳转到一个新的页面，可以使用 window.location 对象。例如：

// 跳转到新页面
function redirectToNewPage(url) {
    window.location.href = url;
}

示例代码

下面是一个完整的示例，包含了前进、后退和页面跳转的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>History Control Example</title>
</head>
<body>
    <h1>浏览器历史控制示例</h1>
    <button onclick="goBack()">后退</button>
    <button onclick="goForward()">前进</button>
    <button onclick="goToPreviousPage()">跳转到上一页</button>
    <button onclick="goToNextPage()">跳转到下一页</button>
    <button onclick="goToSpecificPage(-2)">跳转到前两页</button>
    <button onclick="redirectToNewPage('https://www.example.com')">跳转到新页面</button>

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

        function goForward() {
            window.history.forward();
        }

        function goToPreviousPage() {
            window.history.go(-1);
        }

        function goToNextPage() {
            window.history.go(1);
        }

        function goToSpecificPage(n) {
            window.history.go(n);
        }

        function redirectToNewPage(url) {
            window.location.href = url;
        }
    </script>
</body>
</html>