如何知道用户是否在 Javascript onbeforeunload 对话框上单击了取消？

Question

当有人试图在未保存其工作的情况下离开特定页面时，我会弹出一个对话框。我使用 Javascript 的 onbeforeunload 事件，效果很好。

现在我想在用户在出现的对话框上单击“取消”时运行一些 Javascript 代码（表示他们不想离开页面）。

这可能吗？我也在使用 jQuery，所以是否有像 beforeunloadcancel 这样的事件可以绑定？

更新：这个想法是在用户选择取消时实际保存并将其引导到不同的网页

Answer 1

你可以这样做：

$(function() {
    $(window).bind('beforeunload', function() {
        setTimeout(function() {
            setTimeout(function() {
                $(document.body).css('background-color', 'red');
            }, 1000);
        },1);
        return 'are you sure';
    });
}); 

第一个setTimeout 方法中的代码有1ms 的延迟。这只是将函数添加到UI queue 中。由于setTimeout 异步运行，Javascript 解释器将继续直接调用return 语句，这反过来又触发浏览器modal dialog。这将阻塞UI queue，并且第一个setTimeout 中的代码不会执行，直到模态关闭。如果用户按下取消，它将触发另一个 setTimeout，它会在大约一秒内触发。如果用户用 ok 确认，用户将重定向并且第二个 setTimeout 永远不会被触发。

示例：http://www.jsfiddle.net/NdyGJ/2/

Answer 2

我知道这个问题现在已经过时了，但如果有人对此仍有疑问，我找到了一个似乎对我有用的解决方案，

基本上unload 事件在beforeunload 事件之后触发。我们可以使用它来取消在beforeunload 事件中创建的超时，修改 jAndy 的答案：

$(function() {
    var beforeUnloadTimeout = 0 ;
    $(window).bind('beforeunload', function()  {
        console.log('beforeunload');
        beforeUnloadTimeout = setTimeout(function() {
            console.log('settimeout function');
            $(document.body).css('background-color', 'red');
        },500);
        return 'are you sure';
    });
    $(window).bind('unload', function() {
        console.log('unload');
        if(typeof beforeUnloadTimeout !=='undefined' && beforeUnloadTimeout != 0)
            clearTimeout(beforeUnloadTimeout);
    });
}); 

编辑： jsfiddle here

Answer 3

不可能。也许有人会证明我错了......你想运行什么代码？你想在他们点击取消时自动保存吗？这听起来违反直觉。如果您还没有自动保存，我认为当他们点击“取消”时自动保存几乎没有意义。也许您可以在 onbeforeunload 处理程序中突出显示保存按钮，以便用户在离开之前看到他们需要做什么。

Answer 4

我不认为这是可能的，但只是尝试了这个想法并且它有效（尽管它有点像黑客，并且可能在所有浏览器中都无法正常工作）：

window.onbeforeunload = function () {   
  $('body').mousemove(checkunload);
  return "Sure thing"; 
};

function checkunload() {   
  $('body').unbind("mousemove");
  //ADD CODE TO RUN IF CANCEL WAS CLICKED
}

Answer 5

另一种变化 第一个 setTimeout 等待用户响应浏览器的离开/取消弹出窗口。第二个 setTimeout 等待 1 秒，然后只有在用户取消时才调用 CancelSelected。否则页面会被卸载，setTimeout 会丢失。

window.onbeforeunload  = function(e) {
    e.returnValue = "message to user";
    setTimeout(function () { setTimeout(CancelSelected, 1000); }, 100);
}

function CancelSelected() {
    alert("User selected stay/cancel");
}

Answer 6

window.onbeforeunload  = function() {
    if (confirm('Do you want to navigate away from this page?')) {
        alert('Saving work...(OK clicked)')
    } else {
        alert('Saving work...(canceled clicked)')
        return false
    }
 }

如果用户在 IE8 中单击“取消”，则使用此代码也会出现默认导航对话框。