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?

Answer 1

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

Answer 2

您应该考虑这样做：

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

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>

Answer 4

以下代码正常运行。

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

Answer 5

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.

Answer 6

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.