web-dev-qa-db-fra.com

Est-il possible d'afficher un message personnalisé dans la fenêtre avant le déchargement?

Lorsque vous utilisez window.onbeforeunload (ou $(window).on("beforeonload")), est-il possible d'afficher un message personnalisé dans cette fenêtre?

Peut-être une petite astuce qui fonctionne sur les principaux navigateurs?

En regardant les réponses existantes, j'ai le sentiment que cela était possible dans le passé en utilisant des éléments comme confirm ou alert ou event.returnValue, mais maintenant, il semble qu'ils ne fonctionnent plus.

Alors, comment afficher un message personnalisé dans la fenêtre beforeunload? Est-ce encore/encore possible?

javascriptjquerygoogle-chromefirefoxsafari
44
Ionică Bizău

Pour définir un message de confirmation avant que l'utilisateur ne ferme la fenêtre, vous pouvez utiliser

jQuery 

$(window).bind("beforeunload",function(event) {
    return "You have some unsaved changes";
});

Javascript 

window.onbeforeunload = function() {
    return "Leaving this page will reset the wizard";
};


Il est important de noter que vous ne pouvez pas mettre confirm/alert à l'intérieur beforeunload


Quelques notes supplémentaires:

  1. PAS tous les navigateurs le supportent (plus d'informations dans la section Compatibilité du navigateur sur MDN)
  2. Dans Firefox, vous DEVEZ effectuer de véritables interactions avec la page pour que ce message apparaisse à l'utilisateur.
  3. Chaque navigateur peut ajouter son propre texte à votre message.

Voici les résultats obtenus avec les navigateurs auxquels j'ai accès:

Chrome:

Chrome alert on exit

Firefox:

Firefox alert on exit

Safari:

Safar alert on exit

IE:

IE alert on exit

Juste pour vous assurer - vous devez avoir jQuery inclus

Plus d'informations sur la prise en charge des navigateurs et la suppression du message personnalisé:

  1. Chrome supprimé prise en charge du message personnalisé dans la version 51
  2. Opera supprimé support du message personnalisé dans la version 38
  3. Firefox a supprimé la prise en charge du message personnalisé dans la version 44.0 (toujours à la recherche de source pour cette information)
  4. Safari supprimé support du message personnalisé dans la version 9.1
103
Dekel

Lorsque vous utilisez window.onbeforeunload (ou $(window).on("beforeonload")), est-il possible d'afficher un message personnalisé dans cette fenêtre?

Plus maintenant. Tous les principaux navigateurs ont commencé à ignorer le message et à montrer leur propre message.

En regardant les réponses existantes, j'ai le sentiment que cela était possible dans le passé en utilisant des éléments comme confirm ou alert ou event.returnValue, mais maintenant, il semble qu'ils ne fonctionnent plus.

Correct. Il y a longtemps longtemps , vous pouviez utiliser confirm ou alert, plus récemment, vous pouviez renvoyer une chaîne à partir de onbeforeunload _ gestionnaire et cette chaîne seraient affichés. Maintenant, le contenu de la chaîne est ignoré et il est traité comme un indicateur.

Lorsque vous utilisez on de jQuery, vous devez bien utiliser returnValue sur l'événement d'origine:

$(window).on("beforeunload", function(e) {
    // Your message won't get displayed by modern browsers; the browser's built-in
    // one will be instead. But for older browsers, best to include an actual
    // message instead of just "x" or similar.
    return e.originalEvent.returnValue = "Your message here";
});

ou à l'ancienne façon:

window.onbeforeunload = function() {
    return "Your message here"; // Probably won't be shown, see note above
};

C'est tout ce que tu peux faire.

16
T.J. Crowder

Je viens de faire apparaître une div qui montre un message en arrière-plan. C'est derrière le modal mais c'est mieux que rien. C'est un peu louche, mais au moins vous pouvez donner à votre utilisateur des informations sur les raisons pour lesquelles vous le dérangez de ne pas partir.

constructor($elem)
{
    $(window).unbind().bind('beforeunload', (e) => this.beforeUnload(e));
}
beforeUnload(e)
{
    $('#leaveWarning').show();
    setTimeout(function(){
        $('#leaveWarning').hide();
    }, 1); // set this to 1ms .. since timers are stopped for this modal,
           // the message will disappear right after the user clicked one of the options  
    return "This message is not relevant in most modern browsers.";
}

Voici un Fiddlede travail _ https://jsfiddle.net/sy3fda05/2/

2
Andy Killat