Why does history back not work on onclick in Firefox?

Question

I don't understand why in Firefox, window.history.back() does work on a button:

<button onclick="window.history.back()">Go back</button>

But it does not work for a link:

<a onclick="window.history.back()">Go back</a>

What is the difference?

An example illustrating this:

index.html

<!DOCTYPE html>
<html>
<body>
  <h1>First page</h1>
  <br/>
  <a href="second.html">Second</a>
</body>
</html>

second.html

<!DOCTYPE html>
<html>
<body>
  <h1>Second page</h1>
  <a href="third.html">Third</a>
  <br/>
  <br/>
  <button onclick="window.history.back()">Go Back (button)</button>
  <br/>
  <a href="javascript: void(0);" onclick="window.history.back()">Go Back (a)</a>
</body>
</html>

third.html

<!DOCTYPE html>
<html>
<body>
  <h1>Third page</h1>
  <br/>
  <button onclick="window.history.back()">Go Back (button)</button>
  <br/>
  <a href="javascript: void(0);" onclick="window.history.back()">Go Back (a)</a>
</body>
</html>

Scenario:

Run index.html and click Second.
On second.html click Third.
On third.html click Go back (a).
On second.html click Go back (a). Boom! I'm on the third.html, and not on the first.html!!!

Plunker example (Note! Run it on Firefox)

If you use Go back (button) it works. What is the difference in <a onclick and <button onclick in this case?

Justus Romijn · Accepted Answer

You are facing this issue (quoted from vikku.info):

But what had happened when i press the back button after navigating to various pages was i got locked between the last two navigated pages.

Someone in the comments hit the nail on this issue.

When you create the onclick attribute, you are attaching an additional event handler for clicking a link. However, the browser will still handle some native logic, so it will still add the current page to the history;
When you pass in specific javascript into the href attribute, you are actually overriding the native logic of the browser, so it won't add the current page to the history;

SIMPLE, DIRTY SOLUTION

HTML:

<a href="javascript:window.history.back();">Back</a>

IMPROVED SOLUTION

I've also created an example (Plunker example) that makes use of the native preventDefault functionality (MDN on preventDefault). In that case, it is not needed to write javascript in the href attribute. Now, you can support users that are not using javascript by linking to, for example, the homepage. You better also avoid using inline event handlers.

HTML:

<a href="index.html" id="backButton">Back</a>

Javascript:

var backbutton = document.getElementById("backButton");
backbutton.onclick = function(e){
  e = e || window.event; // support  for IE8 and lower
  e.preventDefault(); // stop browser from doing native logic
  window.history.back();
}

LittleSweetSeas · Answer

I think it may be related to the href attribute of the a tag, that get interpreted as a next step in navigation (even if you go back in history).

Try removing the href attribute from the a.

As you see, this way it works:

Demo

You do need just to fix CSS for the a now

Mr.G · Answer

Try this:

$("#back").click(function(e) {
    e.preventDefault();
    history.back(1);
})

or

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

Why does history back not work on <a> onclick in Firefox?

Tags:

javascript

html

lukpaw

3 Answers

Justus Romijn

LittleSweetSeas

Mr.G

Recent Activity

Donate For Us