Coolnerds JavaScript Back Links

Here's an example of a tiny script embedded right in an HTML tag. It uses the back() method of the history object to take the visitor back to the previous page in the browser's history list. If you click the link below, you'll be taken to whatever page preceded this one. From there you can click the Forward button to come back to this page:

If you look at the document source for this page, you'll see the code looks like this:

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

Note that the JavaScript code is preceded by the word "javascript" and a colon (javascript:). That's required when placing code next to an href attribute. Otherwise HTML won't know that there's JavaScript code after the equal sign, and will try to interpret that text as a URL.

Picture Link

As with any hyperlink, you can put a graphic image between the <a>...</a> tags to use an image as the link. For example, clicking the image below takes you back a page:

The code is identical to the text example. Except rather than putting text between the tags, I've put in an <img... tag to display a graphic image:

<a href="javascript:history.back()">
   <img src="../images/goback.gif" alt="Back" border=0 height=32 width=32>
</a>

If you're going to use a graphic image, though, you can skip the <a href... tags altogether simply by adding onclick="history.back()" to the <img... tag, like this:

<img src="goback2.gif" onclick="history.back()" alt="Back" border="0"...>

which has the same result as using the <a tags.

Button Link

You can also use a button for the back link, as below:

Here's the code for the button example:

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

Frames

If you want the Back link to change the contents of a specific frame in your site, replace

"history.back()"

with

"parent.framename.history.back()"

where framename is the name of the frame that you want to have move back in its history list.

history.go(x)

If, for whatever reason, you need to go back two or more pages, replace back() with go(-x) (where x is the number of pages to skip back. For example, the link below takes the reader back two pages in the history list:

<a href="javascript:history.go(-2)">Back</a>

Ye Olde Caveat

Note that in your web browser, the Back button in the toolbar is dimmed and unavailable if there is no page to go back to at the moment. The on-page links above will not be dimmed when there is no page to go back to. Instead, the link will be available for clicking. However, clicking on it will have no effect.

For more detail on the history object and back() and go() methods, check the official documentation via Coolnerds JavaScript/Object Model Xref.