Foward and Back Buttons How to make JavaScript history buttons

Well, you want to make a back button- but you want the button to take the viewer back to the page they just came from, which may not have been one of your pages. This kind of back button would act like the back button on a web browser. Well, if you really want to have one, you can do it with a nifty little javascript. Here it is:

<FORM>
<INPUT type="button" value="Click here to go back" onClick="history.back()">
</FORM>

This will place a button on your page that will send the user back to the last page in their history list before yours. To try it out, click the link below and see the button on the new page.

Example for a link -- button examples are on the bottom of the page

Here's the code:

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


And when you clicked the button, you ended up back here. You can try going to the example page from elsewhere......you'll just be sent back there when you click the button....

So, what does all of that code mean? Okay, here's the scoop:

  1. <FORM>
    This opens a form so we can use the button on the page.

  2. <INPUT type="button" value="Click here to go back".....
    This creates the button we use for the script.

  3. ....onClick="history.back()">
    This is what makes everything happen. The onClick=" " tells the browser to do the command in the quotes when the button is clicked. The history.back() is the function that does just what it says: It takes the viewer on step back in their history list. ....

Okay, you can swap out the history.back() function above with one of the following to do some different things:

  1. history.forward()
    This will take the viewer one step forward in their history list.

  2. history.go(-1) or history.go(1)
    This allows you to determine how far forward or back to take the viewer. Use a minus sign and a number to go back, or just a number to go forward.
  3. I also use the history button to make an easy page refresh for Netscape <4. in the <body> tag, I add <body onLoad="history.go(0)" > to resize the page.

 


Click a button to go forward or back...


Click a button to go forward or back two pages...
Advanced

 

The History object, in the eyes of the JavaScript interpreter, is an array of URLs. It's an array, complete with an index beginning at 0, containing the URLs of the sites the surfer has visited since starting the browser. The History object comes in handy when you want to create navigation buttons to assist visitors to your site.

If you want to do anything with the array of URLs that is the History object, especially with a loop, you need to know how many entries are in the list. The history.length property tells you.

<HEAD>
<TITLE>Checking the Length of the History List</TITLE>
</HEAD>
<BODY>
<H1>Where have you you been?</H1>

<SCRIPT LANGUAGE=JavaScript>
<!-- . /* This program examines the length of the History list. */

document.write("<P>You've been to " + history.length + " different sites during this session.")

// -->
</SCRIPT>

</BODY>

The line document.write("<P>You've been to " + history.length + " different sites during this session.") refers to the history.length property of the history object. That's the number of URLs in the History list.

For security reasons, a JavaScript function can't read the URLs that are stored in the History object. You can't figure out what sites your visitors have been to this way. You can, however, send them forward and back in their history lists.