Question

我不明白为什么在Firefox中window.history.back()可以使用按钮：

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

但它不适用于链接：

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

有什么区别？

说明这一点的一个例子：

的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>

情境：

运行index.html并点击第二。
在second.html上点击第三次。
在third.html上点击返回（a）。
在second.html上点击返回（a）。繁荣！我在first.html上，而不是在first.html上!!!

Plunker example （注意！在Firefox上运行）

如果您使用返回（按钮），则可以使用。在这种情况下<a onclick和<button onclick有什么区别？

Answer 1

您正面临此问题（quoted from vikku.info）：

但是在我导航到后按下后退按钮时发生了什么各个页面被锁定在最后两个导航页面之间。

评论中有人对这个问题有所了解。

创建onclick属性时，您附加了一个用于单击链接的附加事件处理程序。但是，浏览器仍将处理一些原生逻辑，因此它仍会将当前页面添加到历史记录中;
当您将特定的javascript传递到href属性时，实际上是覆盖了浏览器的 native 逻辑，因此它不会将当前页面添加到历史记录中; < / LI>

简单，肮脏的解决方案

HTML：

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

改进的解决方案

我还创建了一个使用原生preventDefault功能（Plunker example）的示例（MDN on preventDefault）。在这种情况下，不需要在href属性中编写javascript。现在，您可以通过链接到例如主页来支持不使用javascript的用户。您最好还避免使用内联事件处理程序。

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();
}

Answer 2

我认为它可能与href标记的a属性相关，它被解释为导航的下一步（即使您回到历史记录中）。

尝试从href删除a属性。

如您所见，这种方式有效：

Demo

您只需修复a现在

的CSS

Answer 3

试试这个：

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

或

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

Answer 4

尝试

window.history.go(-1)

查看 link 了解详情。

为什么历史记录不能用于<a> onclick in Firefox?</a>

4 个答案: