Question

我有一个页面，我想确认用户是否想要离开。我只有在满足某个条件时才需要确认，所以我写了这样的代码

var back=false;
back=//check if user pressed back button
window.onbeforeunload = function (e) {
    alert(back);   //this alerts true
    if(back==true)
        return false;
        //e.preventDefault;   --this does not work too
};

但这不起作用。我的意思是当我点击后退按钮时，这个onbeforeunload仍然会触发，即使我返回false，我仍然会收到确认消息。什么可能是错的？谢谢

Answer 1

如果要为用户提供中止卸载的选项，请返回一个字符串。在其他情况下不返回任何内容。

var back = false;
back = true; //Somewhere, the condition is set to true
window.onbeforeunload = function (e) {
    if(back == true)
        return "Are you sure to exit?";
}

Answer 2

$(window).bind('beforeunload',function() {
    return "'Are you sure you want to leave the page. All data will be lost!";
});

$('#a_exit').live('click',function() {
    $(window).unbind('beforeunload');
});

试试这个。以上代码适用于大多数情况。

Answer 3

您也可以考虑不设置window.beforeunload事件，直到满足您的条件列表。

var confirmUserToLeave = function () {
    if (/* conditions are met */) {
        window.unbeforeunload = function (e) {
            /* whatever you want to do here */
        };
    } else {
        window.unbeforeunload = undefined;
    }
};

然后在某些可能会改变“满足条件”结果的事件上调用该方法。

Answer 4

后端条件

var confirmExist = function (e) {
    return true;
}
window.onbeforeunload = confirmExist;
http get, post request
.then(function(r)) {
    window.onbeforeunload = null;
}

Answer 5

为完整起见，这里推荐使用一种更现代的方法：

let warn = false;
window.addEventListener('beforeunload', e => {
  if (!warn) return;
  // Cancel the event
  e.preventDefault();
  // Chrome requires returnValue to be set
  e.returnValue = '';
});
warn = true;  // during runtime you change warn to true

通常，最好使用window.addEventListener()和 beforeunload事件，而不是onbeforeunload。

Source

您最初发布的代码不起作用的原因是false是非空值。如果在您不希望产生弹出警告的情况下返回了null或undefined，则您的代码将按预期工作。

当前接受的答案之所以有效，是因为JavaScript在函数末尾隐式返回undefined。

如何在遇到某个条件时阻止onbeforeunload触发？

5 个答案: