Way to know if user clicked Cancel on a Javascript onbeforeunload Dialog?
I know this question is old now, but in case anyone is still having issues with this, I have found a solution that seems to work for me,
Basically the unload
event is fired after the beforeunload
event. We can use this to cancel a timeout created in the beforeunload
event, modifying jAndy's answer:
$(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);
});
});
EDIT: jsfiddle here
You can do it like this:
$(function() {
$(window).bind('beforeunload', function() {
setTimeout(function() {
setTimeout(function() {
$(document.body).css('background-color', 'red');
}, 1000);
},1);
return 'are you sure';
});
});
The code within the first setTimeout
method has a delay of 1ms. This is just to add the function into the UI queue
. Since setTimeout
runs asynchronously the Javascript interpreter will continue by directly calling the return
statement, which in turn triggers the browsers modal dialog
. This will block the UI queue
and the code from the first setTimeout
is not executed, until the modal is closed. If the user pressed cancel, it will trigger another setTimeout which fires in about one second. If the user confirmed with ok, the user will redirect and the second setTimeout is never fired.
example: http://www.jsfiddle.net/NdyGJ/2/