How to Make the Browser go Back to Previous Page Using JavaScript?

Making a browser go back to the previous page with the help of JavaScript is quite easy. To do this, simply access the window Object of the browser’s window and its history property. After that, simply use the back() method on the history to move the browser to the previous entry inside its history list.

Additional Note: Referring to the previous page with a <a> reference tag is not a good solution. Most new beginners often try to use the <a> reference tag to move to the previous page, and in the browser’s history, it registers itself as a move forward. So that is not an optimal solution because the browser is not going back. Rather, it is actually going forward.

The method in Spotlight

The following method is used to move the browser back:

This method takes neither takes any parameters nor does it return anything. It simply moves the browser one step back in its history. Let’s go over an example to demonstrate its working

Step 1: Set up home.html

Create an HTML document with the name home, and this is the first page that will be used to move to a second page. To create this home HTML document, use the following lines:

In this HTML document, an <a> tag is used to move the browser “forward” on the second page. At this point, the browser shows the following output:

The webpage shows the link to move to the second page, but currently, that second page is missing, so create that in the next step.

Step 2: Set up secondPage.html

Create another HTML document and name it secondPage.html. In this file, add in the following lines:

In this HTML document, we have created a button with an onclick property set to backButton(). This will create the following webpage on the browser:

The button’s functionality to take the browser back upon button press is still missing. For this, add the following script tag inside the secondPage.html:

In this script tag, the function backButton() is created which will be called on the button press. In this function, the back() method has been applied to the property “history” using the browser’s window object.

After this, load the home.html in a browser and observe the functionality as follows:

There are a few things to notice:

• At first, both the forward and the back button of the browser were disabled because of no history
• Clicking the link takes the user to the second page
• When on the second page, the back button gets activated
• Clicking the button on the second page takes the user back on the home page.
• However, the back button is disabled on the home page, and the forward button is now enabled
• This means that the browser was not redirected to the homepage. Rather, it was moved back from the history

Wrap up

In the JavaScript part of the web page document, simply use the window.history.back() to make the browsers go back to the previous page it had visited. The “window” is the browser’s window object, the “history” is a property of the window object, and back() is the method that is being applied to the history to move the browser back. This article used a step-by-step example to demonstrate the working of the window.history.back() method.