Javascript onbeforeunload

• EN
• Javascript
• Snippets

Javascript Event onbeforeunload is triggered when a page is exited. A browser confirmation dialog is displayed. Here is a function that creates a way to switch the confirmation dialog on and off if required.

Javascript:

/**
 * switches eventlistener to onbeforeunload on/off
 * @see https://blog.ueffing.net/post/2018/04/19/javascript-onbeforeunload/
 * @param boolean bState | default=true (aktiv)
 * @returns boolean
 */
function confirmExit(bState) {

    window.onbeforeunload = null;
    if ('undefined' === typeof bState) {bState = true;}

    // on
    if (true === bState) {
        window.onbeforeunload = function (oEvent) {
            (oEvent || window.event).returnValue = '';
            return '';
        };

        return true;
    }

    // off
    return false;
}

// initial activation
confirmExit(true);

1. Standard behaviour: confirm box occurs

1. try to close this window
2. just reload this page

2. Controlling examples

2.1. regular hyperlinks on the page should always deactivate confirmExit
(no confirm box)

Click me: regular Hyperlink

Click me: <a href="">regular Hyperlink</a>

Javascript:

// regular hyperlinks on the page should always disable confirmExit
$('a[href]').on('click', function(){
    confirmExit(false);             
}); 

2.2. Clicks on elements with class="noConfirmOnExit" should explicitly deactivate confirmExit
(no confirm box)

<form action="">
    <button type="submit" class="noConfirmOnExit">noConfirmOnExit-Hyperlink</button>
</form>

Javascript:

// Clicks on elements with class="noConfirmOnExit" should explicitly deactivate confirmExit
$('.noConfirmOnExit').on('click', function(){
    confirmExit(false);             
}); 

2.3. Clicks on elements with class="confirmOnExit" should explicitly activate confirmExit
(show confirm box)

<form action="">
    <button type="submit" class="confirmOnExit">confirmOnExit-Hyperlink</button>
</form> 

Javascript:

// Clicks on elements with class="confirmOnExit" should explicitly activate confirmExit (show confirm box)
$('.confirmOnExit').on('click', function(){
    confirmExit(true);              
});

Explanations

• The event onbeforeunload is only active if Gestures are detected
  @see https://developers.google.com/web/updates/2017/06/chrome-60-deprecations#require_user_gesture_for_beforeunload_dialogs
  • This means that it is only active and available if an interaction on the website is detected
  • If no interaction has taken place yet, the event will have no effect. For example, the tab/window can be closed immediately. No confirmation dialog is offered.
• Chrome/Firefox obviously "remember" the user's response to a confirmation dialog.
  • Click[X] to close the tab/window:
    • there is NO confirmation dialog if such a confirmation dialog has already been POSITIVELY confirmed BEFORE.
    • a confirmation dialog will be displayed if NO such confirmation dialog has been confirmed POSITIVELY before. OR if such a confirmation dialog has been confirmed NEGATIVELY

[German]

• Das Event onbeforeunload ist nur aktiv, wenn Gestures erkannt werden
  @see https://developers.google.com/web/updates/2017/06/chrome-60-deprecations#require_user_gesture_for_beforeunload_dialogs
  • D.h. ist nur dann aktiv geschaltet und verfügbar, wenn eine Interaktion auf der Website erkannt wird
  • Hat noch keine Interaktion stattgefunden, wird das Event keine Auswirkungen haben. Bspw. kann das Tab/Fenster sofort wieder geschlossenb werden. Es wird kein Confirmation-Dialog angeboten.
• Chrome/Firefox "merken" sich offenbar die Benatwortung eines Confirmation-Dialogs seitens des Nutzers.
  • Wird ein Klick auf [X] vorgenommen mit der Absicht, das Tab/Fenster zu schließen:
    • erfolgt KEIN Confirmation-Dialog falls ZUVOR bereits ein solcher Confirmation-Dialog POSITIV bestätigt wurde.
    • erfolgt SEHR WOHL ein Confirmation-Dialog falls zuvor KEIN solcher Confirmation-Dialog POSITIV bestätigt wurde ODER ein solcher Confirmation-Dialog NEGATIV bestätigt wurde

Some relevant changes in specifications or browser implementation

• 2017-06-14
  The ability for a page to specify the onbeforeunload string was removed in Chrome 51. (It was also removed by Safari starting with Safari 9.1 and in Firefox 4.)
  @see https://developers.google.com/web/updates/2017/03/dialogs-policy
  @see https://www.chromestatus.com/feature/5349061406228480
• 2017-07-25
  Require user gesture for beforeunload dialogs
  @see https://developers.google.com/web/updates/2017/06/chrome-60-deprecations#require_user_gesture_for_beforeunload_dialogs
• 2018-04-19
  Note that event listeners cannot be registered for the onbeforeunload event with the addEventListener and attachEvent methods (only Safari and Google Chrome support it). For a cross-browser solution, register the event handler in HTML (with the onbeforeunload attribute of the body element) or with the onbeforeunload inline event property of the window object. See the examples below for details.
  @see http://help.dottoro.com/ljhtbtum.php