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

Question

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

score 15 · Accepted Answer · answered Oct 21 '11 at 09:44

15

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?";
}

answered Oct 21 '11 at 09:44

Rob W

341,306
83
791
678

1

No you can't change the confirmation message, haha (joking) – david Oct 21 '11 at 10:06
1

@lovesh Browsers have their own implementations of the 'onbeforeunload' confirmation dialog with standard text that will always show, and not all of them will even display the text you've returned to the user. – Anthony Grist Oct 21 '11 at 10:07
@lovesh `return false` in your code **did work**. You've forgotten to set `back=true`. – Rob W Oct 21 '11 at 10:10
@RobW i did. intentionally left that `back=` empty, thats why i said `alert(back)` shows true – lovesh Oct 21 '11 at 10:51

score 2 · Answer 2 · answered May 10 '14 at 07:22

2

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

answered May 10 '14 at 07:22

Niko Jojo

1,204
2
14
31

This doesn't address "when a certain condition" is met, this will always fire – Jay Wick Feb 18 '19 at 06:39

Yannic Hamann · Answer 3 · 2019-08-15T13:52:07.707

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.

score 1 · Answer 4 · edited Sep 13 '16 at 13:44

1

Condition for back-end

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

edited Sep 13 '16 at 13:44

Petter Friberg

21,252
9
60
109

answered Sep 13 '16 at 13:41

Nick

11
1

score 0 · Answer 5 · answered Oct 21 '11 at 09:54

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'.

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

5 Answers5

Linked

Related