How to go Back Browsing History Using JavaScript

The history property of the window object refers to the history object for the window. Using history in JavaScript you can go back to the previous browsing history. 

The history object models the browsing history of a window as a list of document and document states and the length property of the history object specifies the number of elements in the browsing history list.

The history object has back() and forward() methods that behave like the browser's back and forward buttons do, they make the browser go backward or forward one step in its browsing history.

history.back();     // Go back to the browsing history
history.forward(); //Go forward to the browsing history

Creating Buttons for History Back and Forward

You can create buttons to navigate browsing history back and forward using the following code.

<input type=button name="back" value="Go Back" onclick="history.back();">

<input type=button name="forward" 
value="Go Forward"onclick="history.forward();">

Preview:




A third method, go(), takes an integer argument and can skip any number of pages forward or backward in the history list.

history.go(-2) //go back 2, like clicking the back button twice

Creating Buttons for History Back and Forward for Specific Page

You can create buttons to navigate browsing history two step back using the following code.

<input type=button name="backward2"
value="Go Back 2" onclick="history.go(-2);">

Preview:




Using history.go() method, if you want to go forward, can use positive arguments and if you want to go back, can use negative argument and the number used on the argument represents how many steps to go back or forward.

For example, if you want to go two step forward to the browsing history, can use history.go(2); and if you want to go three step backward to the browsing history, can use history.go(-3);
 
If  a window contains child windows such as <iframe> elements, the browsing histories of the child windows are chronologically interleaved with the history of the main window.  This means that calling history.back(); on the main window may cause one of the child windows to navigate back to a previously displayed document but leave the main window in its current state.

If a frame is contained within another frame that is contained within a top-level window, that frame can refer to the top-level window as parent. For parent window to navigate back to a previously displayed document you can use parent property as below.

parent.history.back();


I have described here some methods of navigating browsing history back and forward using JavaScript . If you know other more methods of navigating browsing history back and forward using JavaScript, you are welcomed to mention on the comment session at the bottom this post.

Related Search Terms

• Browsing History Back Using JavaScript

• Browsing History Forward Using JavaScript

Related Posts:

• How to Write JavaScript Function as URL in Hyperlink?

• How to use Round, Random, Min and Max in JavaScript

• How to Concatenate, Join and Sort Array in JavaScript?

• How to Loop Through JavaScript Array?

• How to Loop using JavaScript?

• How to Show Pop Up Boxes Using JavaScript?

• How to Write Conditional Statements in JavaScript?

• How to Write JavaScript With HTML?

• How to create Changeable Date and Time Using JavaScript?

• How to Validate a HTML Form Using JavaScript?

• How to create a simple form using HTML?

• How to Create JavaScript Image Sideshow with Links

• How to Display Date Format in JavaScript?

• How to Validate a HTML Form Using JavaScript?

• What are the Different Ways to Redirect Page in JavaScript?

• How to create Timer Using JavaScript?

• How to make rounded corners border using CSS

• How to Create Custom CSS Template for Printing

• How to create a simple form using HTML?