How to handle Backward & Forward Buttons using JavaScript ?

Last Updated : 01 Aug, 2022

In this article, we will see how to control the backward & forward buttons of the browser using Javascript, along with understanding its implementation through the illustrations. The forward button is used to go to the next page while the back button is used to go to the previous page. The forward or backward buttons will be in an active state depending on the page that we navigate.

These forward and backward buttons can be handled using the Window History Object, which contains the browser’s history. History object is one of the properties of the window object. It can be accessed using window.history or history. History object have details of all the URLs that a user has visited. It is supported by all the major browsers. The Window History Object provides 2 methods that can be utilized to navigate to the previous or to the next page in the browser, which is described below:

History forward() Method: This method in HTML is used to load the next URL in the history list. The forward() method helps in loading that URL from which we came to this page by clicking back. If any next page is not available then you will not be able to click on the forward button
History back() Method: This method in HTML is used to load the previous URL in the history list. The back() method helps in loading previously visited URLs from the history list. If any previous page is not available then you will not be able to click on the back button.

Syntax:

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

Approach: This task can be accomplished in 2 different ways, i.e., by implementing the History.forward() Method or History.back() Method & the History go() method. For the 1st example, we will use History.forward() & History.back() methods while in the 2nd example, we will use History go() method. We will follow the below approach:

Create an HTML file and two tags <h1> and <h3>
After that, we shall make two buttons with names forward and back
After that, we shall declare Onclick events on both the buttons which will activate on clicking those buttons
Onclick event on the back button will call back() method of history object
Onclick event on forwarding button will call forward() method of history object

Example 1: This example illustrates the window.history object by implementing the forward() and back() method that helps to navigate to the previous or next page.

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>

Output:

History go() Method: This method in HTML is used for loading a specific URL from the history list. It is a better alternative to history.back() and history.forward() methods if a number or the URL of the specific page is known which want to load from your history. Forward and Back button can also be implemented using this method of history object. If we will pass “-1” as an argument then it will behave like back() whereas if we will pass “1” as an argument then it will behave like forward().

Syntax:

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

Example 2: This example implements the History go() Method that uses the window.history.go(1) and window.history.go(-1).

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>