Introduction to JavaScript History Object
The javascript history object contains the browsers history. The browsers history contains an array of web pages or URLs the user has visited recently. This history object can be used to go a particular page or URL, previous URL or forward URL. The history object can be used on the window property as window.history, but if window removed from it alone history object also works well.
Syntax
The syntax of the history object in javascript is:
- history
- window.history
Property
length: The length property gives the length of the history URLs the user has been visited recently.
Methods
- go(): go() method loads the specified page number in browser. This method use as go(distance) which is same as clicking the forward or the backward button to the specified page.
- back(): back() method loads the previous page which is same as clicking backward button in the browser.
- forward(): forward() method loads the next page which is same as clicking forward button in the browser.
Examples to Implement JavaScript History Object
Below are the examples mentioned:
Example #1
Next we write the html code to understand the working of history.back() method more clearly with the following example, the history.back() method used to load the previous page from history URLs using the button element:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This Is An Example For History Object In JavaScript </title>
</head>
<body>
<b> Click the below button to see the number of URLs visited by the user. </b> </br>
<input type = "button" value = "Length Property" onclick = "fun()">
<script>
function fun() {
alert( "The number of URLs in the browser history is " +window.history.length );
}
</script>
</body>
</html>Output:
Output: Once we click on the Length Property button the output is
Example #2
Next we write the html code to understand the working of history.back() method more clearly with the following example, the history.back() method used to load the previous page from history URLs. Here we will create two html pages h1.html and h2.html, where h1.html will contain the link for h2.html and h2.html will contain code to call history object back() method. So once the back method called it go to the previous URL that is h1.html, as in below code –
Code:
<!-- h1.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This Is An Example For History Object In JavaScript </title>
</head>
<body>
<b> This Is First Page. </b> </br>
<a href="file:///C:/Users/csc/Desktop/h1.html"> Go to next page </a>
</body>
</html>
<!-- h2.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This Is Second Page</title>
</head>
<body>
<b> Click the below button to go back prevous page or URLs visited by the user. </b> </br>
<input type = "button" value = "Back Method" onclick = "fun()" >
<script>
function fun() {
window.history.back();
}
</script>
</body>
</html>Output:
Output: Once we click the above link, the output is
Output: And once we click the above Back Method button, the output is
Example #3
Next we write the html code to understand the working of history.go(), the history.go() method used to loads the particular page(forward or the backward) from history URLs. If we pass greater than 0 value to the go() method then it loads the forward page for example go(2) goes two steps in forward direction, if we pass lesser than 0 value to the go() method then it loads the backward page for example go(-1) goes one step in backward direction. Here we will create again two html pages h1.html and h2.html, where h1.html will contain the link for h2.html and h2.html will contain code to call history object go(-1) method which go just one step backward.
Code:
<!-- h1.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This Is An Example For History Object In JavaScript </title>
</head>
<body>
<b> This Is First Page. </b> </br>
<a href="file:///C:/Users/csc/Desktop/h2.html"> Go to next page </a>
</body>
</html>
<!-- h2.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This Is Second Page </title>
</head>
<body>
<b> Click the below button to go back prevous page visited by the user by using go method. </b> </br>
<input type = "button" value = "Go Method" onclick = "fun()" >
<script>
function fun() {
window.history.go(-1);
}
</script>
</body>
</html>Output:
Output: Once we click the above link, the output is
Output: And once we click the above Back Method button, the output is
Example #4
Next we rewrite the above html code to see working of history.forward() method. The history.forward() method used to load the forward page from history URLs. Here again have two html pages h1.html and h2.html, where h1.html contain the link for h2.html and history object forward() method, the h2.html contain same as above.
Code:
<!-- h1.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This Is An Example For History Object In JavaScript </title>
</head>
<body>
<b> This Is First Page. </b> </br>
<a href="file:///C:/Users/csc/Desktop/h2.html"> Go to next page </a></br></br>
<input name="action" type="submit" onclick="history.forward()" value="Forward Method"/>
</body>
</html>
<!-- h2.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This Is Second Page </title>
</head>
<body>
<b> Click the below button to go back prevous page visited by the user by using go method. </b> </br>
<input type = "button" value = "Go Method" onclick = "fun()">
<script>
function fun() {
window.history.go(-1);
}
</script>
</body>
</html>Output:
Output: Once we click the above link, the output is
Output: once we click the above Back Method button, the output is
Output: And once we click the above Forward Method button, the output is
Conclusion
The browsers history object contains history of all the web pages or URLs the user has been visited. This history object can be used to go to a particular page or URL, previous URL or forward URL in the visited URLs using three methods which are go(), back() and forward() respectively.