history.back() - how to set a default if no history exists

Question

I'm trying to be clever and considerate towards users, but once again, I've run into a "design" issue.

I have a number of pages on a website where I've chosen to remove the default navigation and replace it with a simple "back" button.

The back button functions like this:

href="javascript:history.back()"

I've also "no-indexed" these pages, so in theory all is good.

However, I've one more concern - it's probably never going to happen, but it would be good to know how to resolve it.

Suppose the user bookmarks the page. At present there's no way back, so I was wondering if it was possible to create a default href="/" but override it in some way if there is history. In fact amending the JavaScript function would suffice if I was able to determine if any history existed.

Is this possible? I'm no JS guru, so I might be trying to achieve something that isn't achievable.

Pyroelectricity

Answer 1

Set the href to the specific URL, then use javascript to override this behaviour if a history record exists.

<a id="backbtn" href="/specific/url">Back</a>

document.getElementById("backbtn").addEventListener("click", function(){
    if (history.length){
        history.back();
        return false;
    }
});

http://jsfiddle.net/d1gz8ue9/8/

That way your link is still valid without javascript and can be opened in a new window.

Deedee

In my experience you don't want more than 5 internal site links to the same page before adding nofollow to lniks. That way you can decide which rank carrying pages actually pass along rank to the page linked to. So I wouldn't just blindly advice to pass along a link to the href for SEO. I would at least add a rel="nofollow" to it. Google will still follow it, but the current page will maintain its current rank. – Jackjackadandy

@Curt - I'm having trouble getting this to work at the moment, but am currently testing. The link always goes back to the home page for me, but I've confirmed that the javascript is being called. – Pyroelectricity

@Curt - the problem was that history starts at 1 not 0, however after reading a few more articles I believe this can be inconsistent from browser to browser. Made a change to document.referrer and it worked. – Pyroelectricity

Answer 2

Well, you can always try the 'bad' practise in the eyes of some, of overwiting hte native function with your own if the history is empty. Thats the quick and dirty if your code relies on auto generated code that implements history.back.

if(!history.length) {
  history.back = function(){location.href='mydefaultpage';};
  }

But if I were you, i'd just make my own personalised back function that checks the length of history like curt has shown in his answer.

Also for your back button I would forgo the

href="javascript:history.back()"

and replace it with

href="#" onclick="!history.length?location.href='foobar.html':history.back()"

or define it in a function

<a href="#" class="back-button">

(function(){ 
    var leave = function() {
        !history.length ? location.href='foobar.html' : history.back();
    };
    var arr = document.getElementsByClassName('back-button');
    for(var i=0;i<arr.length;++i) {
            arr[i].addEventListener('click',leave);
        }
    }
})();

Jackjackadandy

Answer 3

I know it's an old question but i had to solve the problem recently and needed it to work with windows opened with a _blank target in the opener link (in this case the history.length is already 1 and not 0), and I came up with this:

if (history.length > 1) {
  if (history.back() === undefined) {
    history.pushState({}, '', defaultRouteUrl);
  }
} else {
  history.pushState({}, '', defaultRouteUrl);
}

Basically if there is a history it tries to go back, but if something went wrong then navigate to the defaultRouteUrl

For more infos refer to: https://developer.mozilla.org/en-US/docs/Web/API/History

Smedley