How to load the next URL in the history list in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn to load the next page in the history list in JavaScript.

The Window object in JavaScript accesses the window in the browser. This object contains many properties and methods required to do the tasks. The Window object also retrieves the information from the browser window.

There is a history stack in every browser that saves the pages visited by the user. To access this history stack, we can use the history object that is the property of the Window object. By accessing the history from the browser, we can go to the next or previous pages visited by the user.

Let us take a look to load the next page in the history list in JavaScript.

Following are the Methods/Functions from the history object to load the next page in the history list in JavaScript−

history.forward() method
history.go() method

Using the history.forward() Method

The history.forward() method is used to load the next page visited by the user previously.

But, it only works if the next page exists in the history stack in a browser.

Using this method is the same as clicking the forward button in the browser.

Users can follow the below syntax to use the forward() method from the history object to load the next page in the history list.

window.history.forward();
OR
history.forward();

Example 1

In the below example, we have used the forward() method to load the next page in the history list in the browser


<html>
<body>
   <h3> Load next page in the history list using the <i> history.forward() </i> method</h3>
   <button onclick="goForward()">go forward</button>
   <p id="output"> </p>
   <script>
      function goForward() {
         window.history.forward();
         document.getElementById("output").innerHTML = "You will have forwarded to next page if it exists";
      }
   </script>
</body>
</html>

In the above example, users can see that we have used the forward method on clicking the button. But, the page can only navigate to the next page if it exists in the history stack in the browser.

You can click any link on this page, return back and run the program to check how history.forward() method works.

Using the history.go() Method

The history.go() method is used to load the page through its number. We have to provide a page number of the page in the history as its parameter. The page number can be negative or positive based on whether it is a forward or backward page.

Users can follow the below syntax to use the history.go() method from the history object to load the next page in the history list.

window.history.go(page_number)
OR
history.go(page_number)

Here the page_number is the page number of a page in the history list in the browser.

To go to next page using the history.go() method we could pass 1 as the parameter, page_number. See the below syntax−

window.history.go(1)
OR
history.go(1)

Example 2

In the below example, we have used the history.go() method to load the next page in the history list in the browser.


<html>
<body>
   <h3> Load the next page in the history list using the <i> history.go() </i> method </h3>
   <p> Click the "go" button to load next page in the history</p>
   <button onclick = "go()">go</button>
   <p id = "output"> </p>
   <script>
      function go(){
         window.history.go(1);
         document.getElementById("output").innerHTML = "You will have forwarded to next page if it exists";
      }
   </script>
</body>
</html>

In this tutorial, we have learned two methods, using which we can load the next page in the history list in JavaScript. Among these methods, the history.forward() is the method in the history object that loads the next page in the history list. The history.go() is the method in the history object that loads the next page while adding "1" as a parameter.

Shubham Vora

Updated on: 14-Sep-2022

575 Views

Kickstart Your Career

Get certified by completing the course

Get Started