Controlling Browser Properties with JavaScript - History Lesson

As you travel from one Web site to another, most browsers record the URLs you visit in a history buffer, allowing you to return to them at any time with a single click. This history buffer is accessible to you via the History object, which exposes methods and properties for moving forward and backward through the list of recently-accessed URLs.
In order to access the last URL in the, you would use the history.back() method (equivalent to hitting the browser's "Back" button),


<script language="JavaScript">
// go back
window.history.back();
</script>



while the history.forward() method lets you access the next URL in the history list (equivalent to hitting the browser's "Forward" button).


<script language="JavaScript">
// go forward
window.history.forward();
</script>



Here's an example which illustrates how these two methods can be used to build a simple navigation toolbar:


<form>
<input type="button" name="back" value="Back"
onClick="javascript:history.back();">
<input type="button" name="next" value="Forward"
onClick="javascript:history.forward();">
</form>



You can obtain the total number of items in the history list through the History object's "length" property, as below:


<script language="JavaScript">
// display number of items in history list
alert(history.length);
</script>



You cannot access the elements of the history list directly. You can, however, tell the browser to go to a particular URL from the history list with the history.go() method, which accepts an offset indicating which URL in the history list to go to. In this system, the current URL is always 0, meaning that you can go one step back with the following code:


<script language="JavaScript">
// go back
window.history.go(-1);
</script>



Which is equivalent to the following:


<script language="JavaScript">
// go back
window.history.back();
</script>