Home » JavaScript » jQuery » jQuery History Example

About Saeb Najim

Saeb has graduated from the University of Technology. During the last ten years (since 2005) he has been involved with a large number of projects about programming, software engineering, design and analysis . He works as a senior Software Engineer in the e-commerce and web development sector where he is mainly responsible for projects based on Java, Java frameworks, design patterns and Big Data technologies.

jQuery History Example

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.

  1. back() method for loading the previous URL in the history list.
  2. 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:

jQueryHistoryExample1

Go to the previous page

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:

Navigate by using back(),forward() methods

Navigate by using back(),forward() methods

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:

 Check History Length

Check History Length

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.

Download: You can download the full source code of this example here: jQuery History Example

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments