Comment puis-je remplacer la boîte de dialogue OnBeforeUnload et le remplacer par mon propre ?

Question

J'ai besoin d'avertir les utilisateurs sur les modifications non sauvegardées avant de quitter une page (une jolie commune de problème).

window.onbeforeunload=handler

Cela fonctionne, mais il soulève une boîte de dialogue par défaut avec un irritant de message standard qui enveloppe mon propre texte. J'ai besoin soit de remplacer complètement le message standard, de sorte que mon texte est clair, ou (encore mieux) remplacer l'ensemble de la boîte de dialogue avec une boîte de dialogue modale à l'aide de jQuery.

Jusqu'à présent je n'ai pas réussi et je n'ai pas trouvé quelqu'un d'autre qui semble avoir une réponse. Est-il même possible?

Javascript dans ma page:

<script type="text/javascript">   
   window.onbeforeunload=closeIt;
</script>

Le closeIt() fonction:

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

À l'aide de jQuery et jqModal, j'ai essayé ce genre de chose (à l'aide d'un personnalisé de la boîte de dialogue de confirmation):

$(window).beforeunload(function() {
        confirm('new message: ' + this.href + ' !', this.href);
        return false;
    });

qui aussi ne fonctionne pas - je n'arrive pas à se lier à la beforeunload événement.

Answer 1

Vous ne pouvez pas modifier la valeur par défaut de dialogue pour onbeforeunload, alors votre meilleur pari pourrait être de travailler avec elle.

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

Voici une référence à ce à partir de Microsoft:

Lorsqu'une chaîne est affectée à la propriété returnValue de la fenêtre.cas, une boîte de dialogue apparaît qui donne aux utilisateurs la possibilité de rester sur la page en cours et de conserver la chaîne qui lui a été assignée. L'instruction par défaut qui s'affiche dans la boîte de dialogue "voulez-vous vraiment quitter cette page? ... Appuyez sur OK pour continuer ou sur Annuler pour rester sur la page actuelle.", ne peut pas être supprimé ou modifié.

Le problème semble être:

1. Lors de l' onbeforeunload est appelé, il va prendre la valeur de retour de la fonction en tant que window.event.returnValue.
2. Il sera ensuite d'analyser la valeur de retour comme une chaîne de caractères (sauf si elle est nulle).
3. Depuis false est analysée comme une chaîne de caractères, la boîte de dialogue de feu, qui va passer un approprié true/false.

Le résultat est, il ne semble pas être un moyen de l'attribution d' false de onbeforeunload pour l'empêcher de la valeur par défaut de dialogue.

Notes supplémentaires sur jQuery:

• Réglage de l'événement en jQuery peut être problématique, car cela permet aux autres onbeforeunload événements à se produire en tant que bien. Si vous souhaitez que votre événement unload à se produire, je garderais de plain ol' JavaScript pour elle.

• jQuery n'est pas un raccourci pour onbeforeunload de sorte que vous auriez à utiliser le générique bind de la syntaxe.

  $(window).bind('beforeunload', function() {} );
  

Answer 2

Owen est correct. Et la raison derrière cela est la sécurité. Empêchant une page de déchargement est utile dans les web forms et autres, mais il peut facilement être exploitée par un site malveillant pour tromper l’utilisateur en restant sur une page. C’est pourquoi navigateurs implémentent le message standard et présentent ce mécanisme pour l’insertion de texte personnalisé.

Answer 3

Ce qui a fonctionné pour moi (IE8, Chrome, Firefox) est :

Il est important de ne pas renvoyer quoi que ce soit si aucune invite n’est nécessaire qu’il sont a des différences entre IE et les autres comportements de navigateur ici.

Answer 4

Bien qu'il n'y a rien que vous pouvez faire à ce sujet la boîte, dans certains cas, vous pouvez intercepter quelqu'un en cliquant sur un lien. Pour moi, cela valait la peine pour la plupart des scénarios, et comme un secours, j'ai laissé l'événement unload.

J'ai utilisé Boxy au lieu de la norme jQuery Dialogue, il est disponible ici: http://onehackoranother.com/projects/jquery/boxy/

$(':input').change(function() {
    if(!is_dirty){
        // When the user changes a field on this page, set our is_dirty flag.
        is_dirty = true;
    }
});

$('a').mousedown(function(e) {
    if(is_dirty) {
        // if the user navigates away from this page via an anchor link, 
        //    popup a new boxy confirmation.
        answer = Boxy.confirm("You have made some changes which you might want to save.");
    }
});

window.onbeforeunload = function() {
if((is_dirty)&&(!answer)){
            // call this if the box wasn't shown.
    return 'You have made some changes which you might want to save.';
    }
};

Vous pourriez vous joindre à un autre événement, et le filtre plus sur ce genre d'ancre a été cliqué, mais cela fonctionne pour moi et ce que je veux faire et sert d'exemple pour les autres à utiliser ou à améliorer. Pensé que je voudrais partager ceci pour ceux qui veulent cette solution.

J'ai coupé le code, si cela peut ne pas fonctionner ainsi.

Answer 5

1) Utiliser onbeforeunload, pas onunload.

2) La chose importante est d'éviter l'exécution d'une instruction de retour. Je ne veux pas dire, par conséquent, pour éviter de se retrouver à partir de votre gestionnaire. Vous revenez tout droit, mais vous le faites en veillant à ce que vous atteignez la fin de la fonction et de NE PAS exécuter une instruction de retour. Dans ces conditions, le construit-dans la boîte de dialogue standard ne se produit pas.

3) Vous pouvez, si vous utilisez onbeforeunload, lancer un appel ajax dans votre unbeforeunload gestionnaire pour mettre de l'ordre sur le serveur, mais il doit être synchrone, et vous devez attendre et gérer la réponse à votre onbeforeunload gestionnaire (toujours en respectant la condition (2) ci-dessus). Je le fais et cela fonctionne très bien. Si tu fais un appel ajax synchrone, tout est maintenu jusqu'à la réponse. Si vous ne asynchrone, en pensant que vous ne se soucient pas de la réponse du serveur, la page décharger continue et votre appel ajax est abandonnée par ce processus - y compris un script à distance si elle est en cours d'exécution.