Javascript 检测浏览器中的后退按钮点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6359327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
detect back button click in browser
提问by facebook
I have to detect if a user has clicked back button or not. For this I am using
我必须检测用户是否点击了后退按钮。为此，我正在使用
window.onbeforeunload = function (e) {
}
It works if a user clicks back button. But this event is also fired if a user click F5 or reload button of browser. How do I fix this?
如果用户单击后退按钮，它就会起作用。但是，如果用户单击 F5 或浏览器的重新加载按钮，也会触发此事件。我该如何解决？
回答by Gus Crawford
So as far as AJAX is concerned...
所以就 AJAX 而言......
Pressing back while using most web-apps that use AJAX to navigate specific parts of a page is a HUGE issue. I don't accept that 'having to disable the button means you're doing something wrong' and in fact developers in different facets have long run into this problem. Here's my solution:
在使用大多数使用 AJAX 导航页面特定部分的 Web 应用程序时按回是一个巨大的问题。我不接受“必须禁用按钮意味着你做错了什么”，事实上，不同方面的开发人员早就遇到了这个问题。这是我的解决方案：
window.onload = function () {
if (typeof history.pushState === "function") {
history.pushState("jibberish", null, null);
window.onpopstate = function () {
history.pushState('newjibberish', null, null);
// Handle the back (or forward) buttons here
// Will NOT handle refresh, use onbeforeunload for this.
};
}
else {
var ignoreHashChange = true;
window.onhashchange = function () {
if (!ignoreHashChange) {
ignoreHashChange = true;
window.location.hash = Math.random();
// Detect and redirect change here
// Works in older FF and IE9
// * it does mess with your hash symbol (anchor?) pound sign
// delimiter on the end of the URL
}
else {
ignoreHashChange = false;
}
};
}
}
As far as Ive been able to tell this works across chrome, firefox, haven't tested IE yet.
据我所知，它可以在 chrome、firefox 上运行，还没有测试 IE。
回答by Benny Neugebauer
Please try this (if the browser does not support "onbeforeunload"):
请试试这个（如果浏览器不支持“onbeforeunload”）：
jQuery(document).ready(function($) {
if (window.history && window.history.pushState) {
$(window).on('popstate', function() {
var hashLocation = location.hash;
var hashSplit = hashLocation.split("#!/");
var hashName = hashSplit[1];
if (hashName !== '') {
var hash = window.location.hash;
if (hash === '') {
alert('Back button was pressed.');
}
}
});
window.history.pushState('forward', null, './#forward');
}
});
回答by Marco Allori
best way I know
我知道的最好方法
window.onbeforeunload = function (e) {
var e = e || window.event;
var msg = "Do you really want to leave this page?"
// For IE and Firefox
if (e) {
e.returnValue = msg;
}
// For Safari / chrome
return msg;
};
回答by Alexandra
I'm detecting the back button by this way:
我通过这种方式检测后退按钮：
window.onload = function () {
if (typeof history.pushState === "function") {
history.pushState("jibberish", null, null);
window.onpopstate = function () {
history.pushState('newjibberish', null, null);
// Handle the back (or forward) buttons here
// Will NOT handle refresh, use onbeforeunload for this.
};
}
It works but I have to create a cookie in Chrome to detect that i'm in the page on first time because when i enter in the page without control by cookie, the browser do the back action without click in any back button.
它可以工作，但我必须在 Chrome 中创建一个 cookie 来检测我第一次在页面中，因为当我在没有 cookie 控制的情况下进入页面时，浏览器会在没有点击任何后退按钮的情况下执行后退动作。
if (typeof history.pushState === "function"){
history.pushState("jibberish", null, null);
window.onpopstate = function () {
if ( ((x=usera.indexOf("Chrome"))!=-1) && readCookie('cookieChrome')==null )
{
addCookie('cookieChrome',1, 1440);
}
else
{
history.pushState('newjibberish', null, null);
}
};
}
}
AND VERY IMPORTANT, history.pushState("jibberish", null, null);duplicates the browser history.
非常重要，history.pushState("jibberish", null, null);复制浏览器历史记录。
Some one knows who can i fix it?
有人知道我可以修复它吗？
回答by James Hill
Since the back button is a function of the browser, it can be difficult to change the default functionality. There are some work arounds though. Take a look at this article:
由于后退按钮是浏览器的一项功能，因此很难更改默认功能。不过也有一些变通办法。看看这篇文章：
http://www.irt.org/script/311.htm
http://www.irt.org/script/311.htm
Typically, the need to disable the back button is a good indicator of a programming issue/flaw. I would look for an alternative method like setting a session variable or a cookie that stores whether the form has already been submitted.
通常，需要禁用后退按钮是编程问题/缺陷的一个很好的指标。我会寻找一种替代方法，例如设置会话变量或存储表单是否已提交的 cookie。
回答by bpeterson76
I'm assuming that you're trying to deal with Ajax navigation and not trying to prevent your users from using the back button, which violates just about every tenet of UI development ever.
我假设您正在尝试处理 Ajax 导航，而不是试图阻止您的用户使用后退按钮，这几乎违反了 UI 开发的每一个原则。
Here's some possible solutions: JQuery HistorySalajaxA Better Ajax Back Button
以下是一些可能的解决方案： JQuery History Salajax A Better Ajax Back Button
