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

luk*_*paw 8 html javascript

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

<button onclick="window.history.back()">Go back</button>
Run Code Online (Sandbox Code Playgroud)

但它不适用于链接:

<a onclick="window.history.back()">Go back</a>
Run Code Online (Sandbox Code Playgroud)

有什么不同?

举例说明:

的index.html

<!DOCTYPE html>
<html>
<body>
  <h1>First page</h1>
  <br/>
  <a href="second.html">Second</a>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

场景:

  1. 运行index.html并单击Second.
  2. 在second.html上单击第三个.
  3. 在third.html上单击返回(a).
  4. 在second.html上单击返回(a).繁荣!我在第三个问题上,而不是在first.html上!

Plunker示例(注意!在Firefox上运行它)

如果你使用Go back(按钮)它可以工作.是什么在差异 <a onclick<button onclick在这种情况下?

Jus*_*ijn 13

您正面临此问题(引自vikku.info):

但是当我导航到各个页面后按下后退按钮时发生的事情是我被锁定在最后两个导航页面之间.

评论中有人对这个问题起了作用.

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

简单,肮脏的解决方案

HTML:

<a href="javascript:window.history.back();">Back</a>
Run Code Online (Sandbox Code Playgroud)

改进的解决方案

我还创建了一个使用本机功能(在preventDefault上的MDN)的示例(Plunker示例).在这种情况下,不需要在属性中编写javascript .现在,您可以通过链接到例如主页来支持不使用javascript的用户.您最好还避免使用内联事件处理程序.preventDefaulthref

HTML:

<a href="index.html" id="backButton">Back</a>
Run Code Online (Sandbox Code Playgroud)

使用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();
}
Run Code Online (Sandbox Code Playgroud)