如何使用JavaScript处理浏览器的后退和前进按钮

在本文中，我们将看到如何使用JavaScript控制浏览器的后退和前进按钮，并通过图示了解其实现。前进按钮用于转到下一页，而后退按钮用于转到上一页。前进或后退按钮将根据我们导航的页面处于活动状态。

可以使用Window History对象来处理这些前进和后退按钮，它包含浏览器的历史记录。历史对象是窗口对象的属性之一。可以通过如下方式访问它： window.history或history 。历史对象包含用户访问过的所有URL的详细信息。它受到所有主要浏览器的支持。窗口历史对象提供了2个方法，可以用于在浏览器中导航到前一页或下一页，如下所述：

History forward()方法 : 这个方法用于加载历史列表中的下一个URL。forward()方法用于加载通过点击后退而来的URL。如果没有下一页，则无法点击前进按钮。
History back()方法 : 这个方法用于加载历史列表中的上一个URL。back()方法用于加载历史列表中以前访问过的URL。如果没有上一页，则无法点击后退按钮。

语法：

window.history.forward()或history.forward()
window.history.back()或history.back()

步骤： 可以通过两种不同的方式来完成此任务，即通过实现History.forward()方法或History.back()方法以及History go()方法。在第一个示例中，我们将使用History.forward()和History.back()方法，而在第二个示例中，我们将使用History go()方法。我们将按照以下步骤进行操作：

创建一个HTML文件，包含两个标签

h1>和

h3>
* 之后，在文件中添加两个名为forward和back的按钮
* 之后，在这两个按钮上添加Onclick事件，当点击按钮时触发
* 后退按钮的Onclick事件将调用history对象的back()方法
* 前进按钮的Onclick事件将调用history对象的forward()方法

示例1： 这个示例通过实现 forward()和back() 方法来演示window.history对象，这些方法帮助导航到上一页或下一页。

<!DOCTYPE html>
<html>
  
<head>
    <title>处理后退和前进按钮</title>
</head>
  
<body>
    <div>
        <h1>GeeksforGeeks</h1>
        <h3>HTML中的前进和后退按钮-2</h3>
        <button onclick="next()" 
                id="forward">前进
         </button>
        <button onClick="previous()" 
                id="backward">后退
         </button>
    </div>
    <script>
        function next() {
            window.history.forward();
        }
      
        function previous() {
            window.history.back();
        }
    </script>
</body>
</html>

输出：

如何使用JavaScript处理浏览器的后退和前进按钮

History go() 方法的历史 ：在HTML中，这个方法用于从历史列表中加载特定的URL。如果知道要从历史中加载的特定页面的编号或URL，它是history.back()和history.forward()方法的更好选择。也可以使用这个history对象的方法来实现前进和后退按钮。如果我们传递“-1”作为参数，它将像back()一样工作，而如果我们传递“1”作为参数，它将像forward()一样工作。

语法：

window.history.go(1) 或 history.go(1)
window.history.go(-1) 或 history.go(-1)

示例2: 此示例实现了使用window.history.go(1)和window.history.go(-1)的History go() 方法。

<!DOCTYPE html>
<html>
  
<head>
    <title>处理后退和前进按钮</title>
</head>
  
<body>
    <div>
        <h1>GeeksforGeeks</h1>
        <h3>html-2中的Forward和Back Button</h3>
        <button onclick="next()" id="forward">
            前进
        </button>
        <button onClick="previous()" id="backward">
            后退
        </button>
    </div>
    <script>
        function next() {
            window.history.go(1);
        }
      
        function previous() {
            window.history.go(-1);
        }
    </script>
</body>
</html>