Magic link back.

Suppose you just made an internet page, let's say one.htm, with information about a certain subject and on that page are one or more complicated terms. You have made a second page, let's say explain.htm, which explains this. Next you made a link in one.htm from the specific term to explain.htm. Because you don't want to force the visitor of your site to use the "Back" button of his browser al the time, you have made a link in the explain.htm page, pointing back to one.htm. So far so good, but what if you make a second page, f.i. two.htm, also with a link to explain.htm. The link back on explain.htm still points to one.htm instead of two.htm.

What we would really want, is that the "Back" link on explain.htm allways points back to the page from which explain.htm was called, regardless of which page this is. There is a very simple way to do this. It so happens to be that the browser keeps a history record of the last pages visited. For JavaScript, this browser property can be checked. On the left is a small example. This link will take you back to the page from where you called this page

The way this works is very simple, as you can see below.

<a href="JavaScript:history.back()">Back.</a>

We make the link pointing directly to the JavaScript property history (of the browser), with the method back(). You can also use the method go(), to goback more than one page.

<a href="JavaScript:history.go(-2)">Two back.</a>

Or one or more pages forward.

<a href="JavaScript:history.go(+1)">One forward.</a>
<a href="JavaScript:history.go(+3)">three forward.</a>

A "-" sign means that you go back in history and a "+" sign means you go forward. The number that goes with it, tells howmany pages you go forward or backward. Ofcource you can only go forward (in browser history) if you have previously gone backward.

You can also use a button instead of text and a normal hyperlink, like the example on the left.

The HTML that is needed for this is here below.

<form>
<input type="button" value=" Back " onClick="history.back()">
</form>

needless to say that you can also go more staps forward or backward, just like the ordinairy link above, by using history.go().

It may be clear that we can also use an image instead of a button. In this case the hyperlink is a property of the IMG tag. An example is here on the left.

The HTML for this is here below.

<a href="JavaScript:history.back()"><img
src="b-back.gif" width="100" height="20" border="0"></a>

Of cource you can ,just as in all the other examples, go more that one step back- or for- ward by using history.go().