Home arrow JavaScript arrow Page 7 - Controlling Browser Properties with JavaScript

History Lesson - JavaScript

Maybe you know how to make Web pages dance to your tune with JavaScript - but how about making the browser do the same? This tutorial focuses on the important browser objects (including the Window, Location and History objects) that are controllable via JavaScript, showing you how to manipulate and use them in your scripts.

TABLE OF CONTENTS:
  1. Controlling Browser Properties with JavaScript
  2. Starting at the Top
  3. Moving Windows
  4. Bar Tales
  5. Navigating the Family Tree
  6. Location is Everything
  7. History Lesson
  8. Down to the Document
By: Nariman K, (c) Melonfire
Rating: starstarstarstarstar / 120
February 02, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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>

Finally, note that the History object is limited to storing URLs that have been visited in that window itself. To access history items in other windows, use the window name as prefix.



 
 
>>> More JavaScript Articles          >>> More By Nariman K, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: