JavaScript 如何使用处理后退和前进按钮

在本文中，我们将看到如何使用JavaScript控制浏览器的后退和前进按钮，并通过示例理解其实现方式。前进按钮用于跳转到下一页，而后退按钮用于返回到上一页。前进或后退按钮的状态取决于我们导航到的页面。

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

History forward() 方法： 这个方法用来加载历史列表中的下一个URL。forward() 方法有助于加载我们通过点击后退按钮来到此页面的URL。如果没有下一页，则无法点击前进按钮。
History back() 方法： 这个方法用来加载历史列表中的上一个URL。back() 方法有助于加载历史列表中之前访问过的URL。如果没有上一页，则无法点击后退按钮。
语法：

window.history.forward() or history.forward()
window.history.back() or history.back()

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

创建一个HTML文件和两个标签

h1>和

h3>
* 之后，我们将创建两个名称为”forward”和”back”的按钮
* 之后，我们将为这两个按钮声明Onclick事件，该事件将在点击这些按钮时发生
* back按钮的Onclick事件将调用history对象的back()方法
* forwarding按钮的Onclick事件将调用history对象的forward()方法

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Handling the Backward & Forward Buttons</title> 
</head> 
  
<body> 
    <div> 
        <h1>GeeksforGeeks</h1> 
        <h3>Forward and Back Button in html-2</h3> 
        <button onclick="next()" 
                id="forward">Forward 
         </button> 
        <button onClick="previous()" 
                id="backward">Back 
         </button> 
    </div> 
    <script> 
        function next() { 
            window.history.forward(); 
        } 
      
        function previous() { 
            window.history.back(); 
        } 
    </script> 
</body> 
</html>

输出：

JavaScript 如何使用处理后退和前进按钮

go() 方法的历史 ：该方法在HTML中用于从历史列表中加载特定的URL。如果知道要从历史记录中加载的特定页面的编号或URL，则该方法是history.back()和history.forward()方法的更好替代方法。还可以使用此history对象的方法来实现前进和后退按钮。如果将“-1”作为参数传递，则它的行为类似于back()方法，而如果将“1”作为参数传递，则它的行为类似于forward()方法。

语法：

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

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Handling the Backward & Forward Buttons</title> 
</head> 
  
<body> 
    <div> 
        <h1>GeeksforGeeks</h1> 
        <h3>Forward and Back Button in html-2</h3> 
        <button onclick="next()" id="forward"> 
            Forward 
        </button> 
        <button onClick="previous()" id="backward"> 
            Back 
        </button> 
    </div> 
    <script> 
        function next() { 
            window.history.go(1); 
        } 
      
        function previous() { 
            window.history.go(-1); 
        } 
    </script> 
</body> 
</html>