如何知道用户是否在 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 队列 中。由于 setTimeout 异步运行，Javascript 解释器将通过直接调用 return 语句继续，从而触发浏览器模态对话框。这将阻塞 UI 队列，并且第一个 setTimeout 中的代码不会执行，直到模式关闭。如果用户按下“取消”，它将触发另一个 setTimeout，该事件会在大约一秒内触发。如果用户确认“确定”，用户将重定向，并且第二个 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 在这里

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 中单击“取消”，也会出现默认导航对话框。