Go to previous and next page in Javascript - history object

The 05/01/2012 at 04:25:02
Rating: 4/5
Keywords: go previous next pages javascript history object back forward go length history.back(); browser history tutorial

Hi,
In this tutorial, I will show you how to go to the previous or the next page in the history of the browser using javascript.

There is a Javascript Object to do that: history.

history don't manage the history of the browser but the history of the session of the active tab(or window)

This is the different properties and methods of the history object:

back
forward
go
length

back

The back method serves to go to the previous page, it is the equivalent of the previous button of your browser example:
<a href="#null" onclick="javascript:history.back();">Previous</a>

forward

The forward method do the opposite of back, she will redirect you to the next page if exist, otherwise nothing happen. it is the equivalent of the next button of your browser example:
<a href="#null" onclick="javascript:history.forward();">Next</a>

go

The go method let you go backward and forward with the possibility to skip pages example:
This is the content of the history:

http://www.google.com/
http://mail.google.com/
http://www.w3.org
http://www.youtube.com

go(0); will redirect you to http://www.webestpp;s.com/ because it is the current page.
go(-2); will redirect you to http://www.google.com/ because you move back 2 pages.
go(1); will redirect you to http://www.w3.org because you move forward 1 page.

length

The length poperty let you know the number of pages in your history.
Example:
document.write("You history contain :"+history.length+" page(s)");

Some browsers limits the number of pages in the history to 50, firefox for example limit it to 50(by default) if you visit more than 50 pahes you can go maximum 50 pages forward of backward.

I hope this tutorial will be useful.

Go to previous and next page in Javascript - history object

back

forward

go

length

Similar Scripts and Tutorials