RSS

JavaScript – Window.History Leasson Learnt

23 Feb

When we do a journey from one web page to another page, 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.

Below is the snippet of code posted for your references.

In order to access the last URL , 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>

Happy Coding!

Have a nice day 🙂

Advertisements
 
Leave a comment

Posted by on February 23, 2013 in Uncategorized

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: