how can i prevent onbeforeunload from firing when a certain condition is met?

i have a page on which i want to confirm if the user wants to leave. i have to confirm only when a certain condition is met so i wrote code like this

var back=false;
back=//check if user pressed back button
window.onbeforeunload = function (e) {
    alert(back);   //this alerts true
    if(back==true)
        return false;
        //e.preventDefault;   --this does not work too
};

but this does not work. i mean when i click on back button this onbeforeunload still fires and i still get the confirmation message even when i m returning false.Whats can be wrong? Thanks

Answers:

Return a string if you want to offer an option to the user to abort the unload. Return nothing in other cases.

var back = false;
back = true; //Somewhere, the condition is set to true
window.onbeforeunload = function (e) {
    if(back == true)
        return "Are you sure to exit?";
}

$(window).bind('beforeunload',function() {
    return "'Are you sure you want to leave the page. All data will be lost!";
});

$('#a_exit').live('click',function() {
    $(window).unbind('beforeunload');
});

Try this. Above code is working in most of conditions.

You could also consider not setting the window.beforeunload event untill your list of conditions are met.

var confirmUserToLeave = function () {
    if (/* conditions are met */) {
        window.unbeforeunload = function (e) {
            /* whatever you want to do here */
        };
    } else {
        window.unbeforeunload = undefined;
    }
};

Then just call that method on certain events that might change the outcome of your 'conditions are met'.

Condition for back-end

var confirmExist = function (e) {
    return true;
}
window.onbeforeunload = confirmExist;
http get, post request
.then(function(r)) {
    window.onbeforeunload = null;
}

For the sake of completeness here a more modern, recommended approach:

let warn = false;
window.addEventListener('beforeunload', e => {
  if (!warn) return;
  // Cancel the event
  e.preventDefault();
  // Chrome requires returnValue to be set
  e.returnValue = '';
});
warn = true;  // during runtime you change warn to true

Typically, it is better to use window.addEventListener() and the beforeunload event, instead of onbeforeunload.

Source

The reason why your originally posted code didn't work is that false is a non-null value. If you would have returned null or undefined in the situation where you don't want to spawn a pop-up warning your code would have worked as expected.

The currently accepted answer works because JavaScript implicitly returns undefined at the end of the function.

how can i prevent onbeforeunload from firing when a certain condition is met?

Answers:

Tags

Recent Questions

Top Questions