Est-il possible d'afficher un message personnalisé dans le popup beforeunload?

Question

Lors de l'utilisation de window.onbeforeunload (ou $(window).on("beforeonload") ), est-il possible d'afficher un message personnalisé dans cette fenêtre contextuelle?

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

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

Alors, comment afficher un message personnalisé dans le popup beforeunload? Est-ce même / encore possible?

Answer 1

Pour définir un message de confirmation de l'utilisateur avant de refermer 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 d' beforeunload

Quelques remarques:

1. PAS tous les navigateurs prennent en charge cette (plus d'infos dans la compatibilité du Navigateur section sur MDN)
2. Dans Firefox, vous DEVEZ faire un peu de véritable interaction avec la page pour que ce message s'affiche à l'utilisateur.
3. Chaque navigateur peut ajouter son propre texte de votre message.

Voici les résultats à l'aide des navigateurs, j'ai accès à:

Chrome:

Firefox:

Safari:

C'est à dire:

Juste pour s'assurer - vous besoin d'avoir jquery inclus

Plus d'informations sur les navigateurs prennent en charge et à la suppression du message personnalisé:

1. Chrome retiré de soutien pour message personnalisé dans ver 51
2. Opéra retiré de soutien pour message personnalisé dans ver 38
3. Firefox supprimé le support du message personnalisé dans ver de 44,0 (toujours à la recherche de la source pour cette information)
4. Safari retiré de soutien pour message personnalisé dans la version 9.1

Answer 2

Lors de l'utilisation d' window.onbeforeunload (ou $(window).on("beforeonload")), est-il possible d'afficher un message personnalisé dans cette popup?

Pas plus. Tous les principaux navigateurs ont commencé à ignorer le message et il suffit de montrer leur propre.

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

Correct. Un long temps, vous pouvez utiliser confirm ou alert, plus récemment, vous pourriez retourner une chaîne de caractères à partir d'un onbeforeunload gestionnaire et que la chaîne s'affiche. Maintenant, le contenu de la chaîne est ignoré et il est considéré comme un drapeau.

Lors de l'utilisation de jQuery on, vous n'avez en fait avoir à utiliser returnValue sur l'origine de l'événement:

$(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 du vieux-fasioned façon:

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

C'est tout ce que vous pouvez faire.

Answer 3

Je viens de faire apparaître un 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.";
}