Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to load the previous URL in the history list in JavaScript?
In this tutorial, we will learn to load the previous 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.
Following are the Methods/Functions from the history object to load the previous page in the history list in JavaScript:
history.back() method
history.go() method
Using the history.back() Method
The history.back() is used to load the previous page visited by the user. It only works if the previous page exists in the history stack in a browser. This method is similar to clicking the back button in the browser.
Syntax
window.history.back(); // OR history.back();
Example
In the below mentioned example, we have used the back() method to load the previous page in the history list in the browser.
<html>
<body>
<h3>Use <i>history.back()</i> to load the previous page in the history list</h3>
<button onclick="goback()">Go Back</button>
<p id="output"></p>
<script>
function goback(){
window.history.back();
document.getElementById("output").innerHTML = "You will have gone to previous page if it exists";
}
</script>
</body>
</html>
In the above example, we have used the back method on clicking the button. The page can only navigate to the previous page if it exists in the history stack in the browser.
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.
Syntax
// Use negative values for previous pages window.history.go(-page_number) // OR history.go(-page_number)
Parameters
page_number ? Page number of a page in the history list in the browser.
Example
In the below example, we have used the go() method to load the previous page in the history list in the browser.
<html>
<body>
<h3>Use <i>history.go()</i> to load the previous page in the history list</h3>
<button onclick="goPrevious()">Go Previous</button>
<p id="output"></p>
<script>
function goPrevious(){
window.history.go(-1);
document.getElementById("output").innerHTML = "You will have gone to previous page if it exists";
}
</script>
</body>
</html>
In the above example, we pass -1 to go back one page in the history. You can use -2 to go back two pages, -3 for three pages, and so on.
Comparison
| Method | Usage | Flexibility |
|---|---|---|
history.back() |
Goes back exactly one page | Limited - only one page back |
history.go(-1) |
Goes back specified number of pages | More flexible - can go back multiple pages |
Conclusion
Both history.back() and history.go(-1) can navigate to the previous page. Use history.back() for simple back navigation or history.go() when you need more control over the number of pages to navigate.
6K+ Views
