Using javascript history.back() fails in Safari .. how do I make it cross-browser?

Question

I am using

<a href="index.php" onclick="history.back();return false;">Back</a>

to provide a back to previous page link. It works fine on Windows (IE/Mozilla) but fails in Safari on both Windows/Mac.

Is there a way to make it work on all of the systems/browsers (cross-browser/platform)?

If it's not possible, is there any other way using PHP etc?

Lacteous

Links are supposed to go forward. This will confuse some people who don't expect it to trigger their browser history and later use their real back button. Other people will be confused as they expect it to take them to the page that is logically before the current page (rather than, for instance, the search engine page they came from). Other people won't have JS enabled and will be confused because index.php isn't "back". Browsers have back buttons built in. Let users use the features they know. Don't try to reinvent the wheel! You will get square wheels! – Hulk

@David thanks for all of the info. I am aware of most of the best practices .. but a need is a need. Here I have asked this question for a solution and dont want users to use the browsers back button.. moreover I have not mentioned the context I am using the back button here .. so dont get that I am trying to inventing/reinventing something. – Lacteous

You must excuse us, but we've met a hundred developers wanting a scripted back action for terrible misguided manager-driven reasons that will make their applications much worse, and not yet one useful application of a scripted-back. – Astrophotography

In case a useful application of this has still not been seen, I'll throw my hat in the ring. Building a quick HTML prototype for testing purposes of an iOS/Android native app which will not be able to take advantage of a browser back button. – Tyr

Answer 1

it should be history.go(-1); return false; or history.go(-1); event.preventDefault();

Cureton

i am using onclick="javascript:history.go(-1)" and it's now working in iOS 8.1.2 Safari – Envelope

Note that if you're attaching this to an event handler on an a tag, make sure you event.preventDefault() before going back, or this still won't work in Safari. – Revolutionize

history.back() now works, but @JoshLeitzel's comment is correct - you need to call event.preventDefault(). – Darbydarce

Answer 2

You should consider doing it like this instead:

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

Crazyweed

If you aren't writing a bookmarklet installer, you shouldn't be using a javascript pseudo-URI in a webpage. – Hulk

Answer 3

Try this instead. It should work across IE, FF, Safari and Chrome.

<a href="#" onclick="if(document.referrer) {window.open(document.referrer,'_self');} else {history.go(-1);} return false;">Cancel<a>

Sheffy

fyi, going back using referrer will not maintain form data but rather open a new page – Classicist

Answer 4

The below code is working.

<a href="javascript:void(0);" onclick="javascript:history.go(-1);">Back</a>

Reshape

Answer 5

I faced a similar issue on an e-commerce site I have been building for one of my customers. I initially went the route of calling:

window.history.back();

when the button was clicked. I encountered the same problem you are having with cross compatibility issues.

To answer you question about

If it's not possible, is there any other way using PHP etc?

My opinion is you should not invoke a method on the server to do a client operation. This is unnecessary overhead on your app and in my opinion, poor design/implementation.

Now to answer your main question:

Is there a way to make it work on all of the systems/browsers (cross-browser/platform)?

To solve the issue I found a client cookie library produced by Mozilla (https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie) from another StackOverflow post (my apologies to the author - I don't have the link to your post).

Using the library I create a cookie with a key of 'back-url' when the user navigates to the part of my app where I want them to be able to go back:

$('#id-of-button-clicked').click(function() {
    docCookies.setItem("back-url", window.location.href, ".myDomain.com", "/");
});

This code sets a cookie with a key-value pair 'back-url', and the current url and makes it accessible from the root directory of myDomain.com.

Next, on the page where I want the user to be able to navigate back to the URL set in the cookie, I call the following code:

$(‘#id-of-back-button’).click(function() {
    window.location.href = docCookies.getItem('back-url');
});

This code sets the window location by getting the value of 'back-url'.

Disclaimer: I am no professional js developer - just trying to put in my two cents from some lessons I have learned.

Challenges to this answer:

• This answer uses cookies, many people don't like the use of cookies. My customers requirements allow me to use cookies.
• I'm not encrypting the cookie - some may consider this bad practice. I am still in the early implementation phase of our development. I am, however, restricting access to the cookie to only within our domain.

Boice

Answer 6

If anyone is still struggling with this issue try removing the href-attribute from the link you want to use window.history.back() with. I'm not sure if this workaround complies with HTML-standards but it worked out fine for me.

Singular

Answer 7

I've faced the same issue recently, and although I'm not exactly sure why, this is the solution that worked for me:

If the user is on iOS:

history.go(-2)

If not:

history.go(-1)

Cicily