The JavaScript Diaries: Part 10/Page 4

The JavaScript Diaries: Part 10

Browser History List

The `history` Object

Browsers store a list of URLs that the user has previously visited. This list enables the user to navigate to previously visited Web pages using the back and forward buttons in the browser. This list of URL's is called the browser's history. It's stored in the form of a list (a portion is pictured at right) that can be accessed by JavaScript. For security reasons, a JavaScript function can't read the URL's that are stored in the history object, so you can't use the list to figure out where your visitors have been.

Properties	Methods
`length`	`back()` `forward()` `go()`

Properties

length

The history object has only one property: length. It returns the number of URL's in the history list. It's not particularly useful. You could use it as in the script below, (although it doesn't do anything except tell your visitor what they already know):

document.write("You\'ve been to "+ history.length
  +" site(s) in this browser session.");
   // combine the two lines above

Methods

back()
forward()

The back() and forward() methods do exactly what they say. They reload the previous page or go to the next page in the browser's history. They act exactly like the browser's Back and Forward buttons. The methods can be written as follows:

<form>
<input type="Button" name="back" value="Go Back"
  onClick="history.back()"> // combine with line above
<input type="Button" name="forward" value="Go Forward"
  onClick="history.forward()"> // combine with line above
</form>

For these methods to work, there must be a listing for a URL in the history (which is before and/or after the current URL). If your visitor visits a link other than just clicking on it, there may not be a way back. For instance, my regular browser is Firefox. Usually, when I click on a link, I press [Ctrl] and the link. This opens the link in a new tab. Doing it that way, I wouldn't have any previous URL listing in the history of that new tab. Or, if I use IE and press [Shift] and the link, it will open in a new window. Once again, there would be no previous URL listed in the history file. Even though your visitor may use navigation techniques like the ones I just outlined, they probably won't understand the whole history thing. If there is a link to go back, and they have no URL in their history, it could prove to be a bit frustrating. And when people become technologically frustrated, they often say: "I'm outta here!"

go()

The go() method is used to move forward or back more than one page at a time in the history list. This is done by placing the number of pages you want to go in the parentheses. Positive numbers move the browser forward; negative numbers move the browser backward. It's like moving in steps. If you want to go forward one page (one step), use this:

history.go(1)

To go back two pages (two steps), you would use this:

history.go(-2)

The problem with this method is that you need to make sure that the browser's history contains that many URLs.

This method can also be used to perform a soft reload of the current page. This is useful when a user has entered data into a form and you don't want to erase it. This is accomplished by using the script below. Be aware, however, that IE may reload a fresh version of the page.

history.go(0)

[previous] [next]

Created: October 14, 2005

URL:

The JavaScript Diaries: Part 10/Page 4