Confirmation avant la fermeture de l'onglet/navigateur

Question

Comment demander une confirmation à l'utilisateur avant qu'il ne quitte la page comme dans gmail ?

J'ai cherché cette question à différents endroits, mais tout ce qu'ils mentionnent est l'utilisation de javascript. window.unload & window.onbeforeunload . De plus, il ne fonctionne pas dans Chrome la plupart du temps car il est bloqué.

Answer 1

Essayez ça :

<script>
window.onbeforeunload = function (e) {
    e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Sure?';
    }

    // For Safari
    return 'Sure?';
};
</script>

Voici un travail jsFiddle

Answer 2

En la solution la plus courte pour l'année 2020 (pour les personnes heureuses qui n'ont pas besoin de supporter IE)

Testé dans Chrome, Firefox, Safari.

function onBeforeUnload(e) {
    if (thereAreUnsavedChanges()) {
        e.preventDefault();
        e.returnValue = '';
        return;
    }

    delete e['returnValue'];
}

window.addEventListener('beforeunload', onBeforeUnload);

En fait, aucun navigateur moderne (Chrome, Firefox, Safari) n'affiche la "valeur de retour" sous forme de question à l'utilisateur. Ils affichent plutôt leur propre texte de confirmation (cela dépend du navigateur). Mais nous avons toujours besoin de retourner une chaîne (même vide) pour déclencher cette confirmation sur Chrome.

Plus d'explications sur MDN aquí y aquí .

Answer 3

Essayez ça :

<script>
    window.onbeforeunload = function(e) {
       return 'Dialog text here.';
    };
</script>

plus d'infos ici MDN .

Answer 4

J'ai lu les commentaires sur la série de réponses comme D'accord . La plupart des utilisateurs demandent que le clic sur le bouton et certains liens soit autorisé. Ici, une ligne supplémentaire est ajoutée au code existant qui fonctionnera.

<script type="text/javascript">
  var hook = true;
  window.onbeforeunload = function() {
    if (hook) {

      return "Did you save your stuff?"
    }
  }
  function unhook() {
    hook=false;
  }

Appelez unhook() onClick pour les boutons et les liens que vous voulez autoriser. Par exemple

<a href="#" onClick="unhook()">This link will allow navigation</a>

Answer 5

Tout simplement

function goodbye(e) {
        if(!e) e = window.event;
        //e.cancelBubble is supported by IE - this will kill the bubbling process.
        e.cancelBubble = true;
        e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

        //e.stopPropagation works in Firefox.
        if (e.stopPropagation) {
            e.stopPropagation();
            e.preventDefault();
        }
    }
window.onbeforeunload=goodbye;