我不明白为什么在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)
场景:
Plunker示例(注意!在Firefox上运行它)
如果你使用Go back(按钮)它可以工作.是什么在差异 <a onclick
和<button onclick
在这种情况下?
Jus*_*ijn 13
您正面临此问题(引自vikku.info):
但是当我导航到各个页面后按下后退按钮时发生的事情是我被锁定在最后两个导航页面之间.
评论中有人对这个问题起了作用.
onclick
属性时,您将附加一个用于单击链接的附加事件处理程序.但是,浏览器仍会处理一些本机逻辑,因此它仍会将当前页面添加到历史记录中;href
属性时,实际上是覆盖了浏览器的本机逻辑,因此它不会将当前页面添加到历史记录中;简单,肮脏的解决方案
HTML:
<a href="javascript:window.history.back();">Back</a>
Run Code Online (Sandbox Code Playgroud)
改进的解决方案
我还创建了一个使用本机功能(在preventDefault上的MDN)的示例(Plunker示例).在这种情况下,不需要在属性中编写javascript .现在,您可以通过链接到例如主页来支持不使用javascript的用户.您最好还避免使用内联事件处理程序.preventDefault
href
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)