如何知道用户是否点击了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在这里