The aim of this example is to show you how to use the jQuery for accessing the browser history.
Sometimes the web site’s user may want to go back to the previous page or forward to the next page.
The following methods can be used for this purpose.
back()method for loading the previous URL in the history list.forward()method for loading the next URL in the history list.
Let’s look at some examples. To download the jQuery library, click here.
1. HTML
First of all you need to create two simple html documents.
jQueryHistoryExample1.html
<!DOCTYPE html> <html> <head> <title>jQuery History Example Page 1</title> <script src="jquery-2.1.4.min.js"></script> </head> <body> <h1>jQuery History Example Page 1</h1> </body> </html>
jQueryHistoryExample2.html
<!DOCTYPE html> <html> <head> <title>jQuery History Example 2</title> <script src="jquery-2.1.4.min.js"></script> </head> <body>jQuery History Example Page 2
</body> </html>
2. jQuery History Examples
2.1 Go to the previous page
Let’s add the following simple html code to the jQueryHistoryExample1 page.
<a href="jQueryHistoryExample2.html" >jQuery History Example</a>
And add following code to the jQueryHistoryExample2 page.
<a href="javascript:retrun 0" id="goToThePreviousPage" >Go To The Previous Page</a>
As you can notice, to get the previous page we need to use back() method.
<script type="text/javascript">
$("#goToThePreviousPage").click(function () {
window.history.back();
})
</script>
The result in the browser would be:
2.2 Navigate by using back() , forward() methods
Let’s add the following simple html code to the jQueryHistoryExample1 page.
<a href="jQueryHistoryExample2.html" >jQuery History Example</a><br/> <a href="javascript:retrun 0" id="forwardToTheNextPage" >Forward To The Next Page</a>
The forward() method had been used to access next page.
<script type="text/javascript">
$("#forwardToTheNextPage").click(function () {
window.history.forward();
})
</script>
And add following code to the jQueryHistoryExample2 page.
<a href="javascript:retrun 0" id="goToThePreviousPage" >Go To The Previous Page</a>
As you can notice, to get the previous page we need to use back() method.
<script type="text/javascript">
$("#goToThePreviousPage").click(function () {
window.history.back();
})
</script>
The result in the browser would be:
2.3 Check History Length
Let’s add the following simple html code to the jQueryHistoryExample1 page.
<a href="jQueryHistoryExample2.html" >jQuery History Example</a><br/> <a href="javascript:retrun 0" id="checkHistory" >Check History Length</a>
We can access the browser session history object length by using: history.length , it will return the number of browsing session history. It will return 1 even though we have nowhere to go to. Using this checking will helps as to make controlled navigation.
<script type="text/javascript">
$("#checkHistory").click(function () {
var historyLength = history.length;
alert("history length is "+historyLength);
});
</script>
The result in the browser would be:
3. Conclusion
jQuery provides us with simple methods for navigation to the next/previous page in the history list. There are two main methods are used for this purpose. back() method is used for loading the previous page and forward() method for loading the next page. The history.length code is used to get the history length.
4. Download the Source Code
This was an example about jQuery history, jQuery history helps users to navigate our website.
