我必须检测用户是否点击了返回按钮。 为此，我正在使用
window.onbeforeunload = function (e) {
}
如果用户单击后退按钮，它会起作用。但是如果用户单击 F5，也会触发此事件 或浏览器的重新加载按钮。我该如何解决这个问题？
【问题讨论】：
window.performance && window.performance.navigation.type == 2 完成（检测后退按钮）
标签： javascript jquery
就 AJAX 而言...
在使用大多数使用 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;
}
};
}
}
据我所知，这适用于 chrome、firefox，尚未测试 IE。
【讨论】：
history.go(-2);。 2.我认为window.onhashchange只有在URL包含“#”锚时才有效
请试试这个（如果浏览器不支持“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');
}
});
【讨论】：
window.history.pushState是对象window.history的子/方法。只测试功能还不够吗？
window.history.pushState （或首先）可能会抛出 Cannot read property 'pushState' of undefined。所以这两个测试是需要的，按照这个特定的顺序。
!!window.history.madeupproperty 这样不存在的属性会产生 false。所以我猜if(!!window.history.pushState) 可能会。无法使用 IE9 (caniuse.com/#feat=history) 进行正确测试。但只需检查!!window.notexistent.madeup 就会引发“无法读取属性...”错误。所以if (window.history && window.history.pushState) 是真正需要的，而且也是按这个顺序。
alert('...') 行之后添加了最后一行window.history.pushState('forward', null, './#forward')。这成功了...没有刷新或对后退按钮单击有任何明显影响。
我知道的最好方法
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;
};
【讨论】：
我正在通过这种方式检测后退按钮：
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.
};
}
它可以工作，但我必须在 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);
}
};
}
非常重要的是，history.pushState("jibberish", null, null); 复制了浏览器历史记录。
有人知道我可以修复它吗？
【讨论】：
由于后退按钮是浏览器的一项功能，因此很难更改默认功能。虽然有一些解决方法。看看这篇文章：
http://www.irt.org/script/311.htm
通常，需要禁用后退按钮是编程问题/缺陷的良好指标。我会寻找一种替代方法，例如设置会话变量或存储表单是否已提交的 cookie。
【讨论】：
我假设您正在尝试处理 Ajax 导航，而不是试图阻止您的用户使用后退按钮，这几乎违反了 UI 开发的所有原则。
以下是一些可能的解决方案： JQuery History Salajax A Better Ajax Back Button
【讨论】：