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方法中的代码延迟为1毫秒。这只是将函数添加到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中，将出现默认导航对话框。

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

6 个答案: