Using Javascript: How to create a 'Go Back' link that takes the user to a link if there's no history for the tab or window?

Question

EDIT-2: None of the answers seem to work. Not even the one I previously marked as the answer of this question. Any help is appreciated. Thanks.

First, I have googled for a how-to on creating a 'Go Back' link that allows the user to return to the previous page, and these are two ways of doing it:

<a href="javascript:history.go(-1)">[Go Back]</a> 

and...

<a href="#" onclick="history.go(-1);return false;">[Go Back]</a> 

Which of these two is a better choice? And why? (Also, please shed some light on browser compatibility.)

That's one half of the question. Now if mine is the first page the user is visiting, the 'Go Back' link wouldn't work, right? (As there's no pre-existing history for the window or tab.) In that case, I want the link to fallback and take the user to http://example.com.

i.e. if history exists, the user is taken to the previous page, and if it doesn't he's taken to http://example.com.

How do I do that? Hope someone can help.

EDIT: Please note that I do not know JavaScript, so kindly make your answer explanative. Thanks.

Answer 1

You cannot check window.history.length as it contains the amount of pages in you visited in total in a given session:

window.history.length (Integer)

Read-only. Returns the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns 1. ^{Cite 1}

Lets say a user visits your page, clicks on some links and goes back:

 www.mysite.com/index.html <-- first page and now current page                  <----+ www.mysite.com/about.html                                                           | www.mysite.com/about.html#privacy                                                   |  www.mysite.com/terms.html <-- user uses backbutton or your provided solution to go back 

Now window.history.length is 4. You cannot traverse through the history items due to security reasons. Otherwise on could could read the user's history and get his online banking session id or other sensitive information.

You can set a timeout, that will enable you to act if the previous page isn't loaded in a given time. However, if the user has a slow Internet connection and the timeout is to short, this method will redirect him to your default location all the time:

window.goBack = function (e){     var defaultLocation = "http://www.mysite.com";     var oldHash = window.location.hash;      history.back(); // Try to go back      var newHash = window.location.hash;      /* If the previous page hasn't been loaded in a given time (in this case     * 1000ms) the user is redirected to the default location given above.     * This enables you to redirect the user to another page.     *     * However, you should check whether there was a referrer to the current     * site. This is a good indicator for a previous entry in the history     * session.     *     * Also you should check whether the old location differs only in the hash,     * e.g. /index.html#top --> /index.html# shouldn't redirect to the default     * location.     */      if(         newHash === oldHash &&         (typeof(document.referrer) !== "string" || document.referrer  === "")     ){         window.setTimeout(function(){             // redirect to default location             window.location.href = defaultLocation;         },1000); // set timeout in ms     }     if(e){         if(e.preventDefault)             e.preventDefault();         if(e.preventPropagation)             e.preventPropagation();     }     return false; // stop event propagation and browser default event } 

<span class="goback" onclick="goBack();">Go back!</span> 

Note that typeof(document.referrer) !== "string" is important, as browser vendors can disable the referrer due to security reasons (session hashes, custom GET URLs). But if we detect a referrer and it's empty, it's probaly save to say that there's no previous page (see note below). Still there could be some strange browser quirk going on, so it's safer to use the timeout than to use a simple redirection.

EDIT: Don't use <a href='#'>...</a>, as this will add another entry to the session history. It's better to use a <span> or some other element. Note that typeof document.referrer is always "string" and not empty if your page is inside of a (i)frame.

See also:

• W3C: HTML5: 5.4.2 The History interface