35

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

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

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

更新：如果他们选择取消，这个想法是实际保存并将用户引导到不同的网页

4

6 回答 6

54

你可以这样做：

$(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/

于 2011-01-10T20:15:22.087 回答
7

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

基本上，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在这里

于 2014-09-10T12:44:10.317 回答
2

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

于 2011-01-10T19:45:45.310 回答
2

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

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

function checkunload() {   
  $('body').unbind("mousemove");
  //ADD CODE TO RUN IF CANCEL WAS CLICKED
}
于 2011-01-13T23:52:15.060 回答
0

另一种变体 第一个 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");
}
于 2021-03-05T14:07:02.477 回答
-7 
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 中单击“取消”，则会出现默认导航对话框。

于 2014-11-26T11:30:40.427 回答