Comment puis-je remplacer la boîte de dialogue OnBeforeUnload et la remplacer par la mienne?

Vous ne pouvez pas modifier la onbeforeunload de dialogue par défaut pour l' onbeforeunload , afin que votre meilleur pari soit de travailler avec elle.

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

Voici une référence à cela de Microsoft:

Lorsqu'une chaîne est affectée à la propriété returnValue de window.event, une boîte de dialogue apparaît qui donne aux utilisateurs la possibilité de rester sur la page actuelle et de conserver la chaîne qui lui a été assignée. L'instruction par défaut qui apparaît dans la boîte de dialogue "Êtes-vous sûr de vouloir vous éloigner de 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. Lorsqu'une onbeforeunload est appelée, il faudra la valeur de retour du gestionnaire comme window.event.returnValue .
2. Il analysera ensuite la valeur de retour en tant que chaîne (à moins qu'elle ne soit nulle).
3. Puisque le false est analysé en tant que chaîne, la boîte de dialogue va déclencher, ce qui passera un true / false approprié.

Il en résulte qu'il ne semble pas y avoir de moyen d'attribuer de false à la onbeforeunload pour l'empêcher de la dialogue par défaut.

Notes supplémentaires sur jQuery:

• La définition de l'événement dans jQuery peut être problématique, car cela permet à d'autres événements en cours d' onbeforeunload . Si vous souhaitez que votre événement de déchargement se produise, je m'en tiendrai à JavaScript pour cela.

• JQuery n'a pas de raccourci pour onbeforeunload donc vous devriez utiliser la syntaxe de bind générique.

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

Owen a raison. Et la raison derrière cela est la sécurité. Empêcher une page de décharger est utile dans les formulaires Web et tel, mais il peut être facilement exploité par un site malveillant pour empêcher l'utilisateur de rester sur une page. C'est pourquoi les navigateurs Web implémentent le message standard et disposent de ce mécanisme pour l'insertion de texte personnalisé.

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

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

Il est important de ne rien renvoyer si aucune invite n'est requise car il existe des différences entre IE et d'autres comportements de navigateur ici.

Bien qu'il n'y ait rien sur la boîte dans certains cas, vous pouvez intercepter quelqu'un en cliquant sur un lien. Pour moi, cela a valu l'effort pour la plupart des scénarios et, en retour, j'ai quitté l'événement de déchargement.

J'ai utilisé Boxy au lieu de la boîte de dialogue jQuery standard, elle 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 pouvez attacher à un autre événement, et filtrer plus sur quel type d'ancrage a été cliqué, mais cela fonctionne pour moi et ce que je veux faire et sert d'exemple pour que d'autres utilisent ou améliorent. Je pensais que je partagerais cela pour ceux qui souhaitent cette solution.

J'ai coupé le code, donc cela peut ne pas fonctionner tel quel.

1) Utilisez la surcharge, et non la surcharge.

2) L'important est d'éviter d'exécuter une déclaration. Je ne veux pas dire, par là, éviter de revenir de votre manipulateur. Vous revenez bien, mais vous le faites en vous assurant que vous atteignez la fin de la fonction et ne PAS exécuter une déclaration. Dans ces conditions, le dialogue standard intégré ne se produit pas.

3) Vous pouvez, si vous utilisez onbreforeload, exécuter un appel ajax dans votre gestionnaire sans réserve pour ranger le serveur, mais il doit être synchrone, et vous devez attendre et gérer la réponse dans votre gestionnaire onbreforeload (toujours respectant Condition (2) ci-dessus). Je fais ça et ça marche bien. Si vous faites un appel ajax synchrone, tout est maintenu jusqu'à ce que la réponse revienne. Si vous faites une asynchrone, en pensant que vous ne vous souciez pas de la réponse du serveur, le déchargement de la page se poursuit et votre appel ajax est interrompu par ce processus – y compris un script distant s'il est en cours d'exécution.

Vous pouvez détecter quel bouton (ok ou annuler) appuyé par l'utilisateur, car la fonction onunload est appelée uniquement lorsque l'utilisateur choisit de laisser la page. Dans cette fonction, les possibilités sont limitées, car le DOM est effondré. Vous pouvez exécuter javascript, mais ajax POST ne fait rien, donc vous ne pouvez pas utiliser cette méthode pour la connexion automatique. Mais il y a une solution à cela. Le window.open ('logout.php') exécuté dans la fonction onunload, de sorte que l'utilisateur se déconnectera avec une nouvelle ouverture de fenêtre.

 function onunload = (){ window.open('logout.php'); } 

Ce code s'appelle lorsque l'utilisateur quitte la page ou ferme la fenêtre active et l'utilisateur déconnecté par 'logout.php'. La nouvelle fenêtre se ferme immédiatement lorsque logout php est composé de code:

 window.close(); 

Essayez de placer un return; Au lieu d'un message … cela fonctionne la plupart des navigateurs pour moi. (Cela empêche vraiment seulement les présentations du dialogue)

 window.onbeforeunload = function(evt) { //Your Extra Code return; } 

J'ai été confronté au même problème, j'avais l'habitude d'avoir sa propre boîte de dialogue avec mon message, mais le problème auquel j'étais confronté était: 1) Il donnait un message sur toutes les navigations. Je le souhaite uniquement pour un clic. 2) avec mon propre message de confirmation si l'utilisateur sélectionne annuler, il affiche toujours la boîte de dialogue par défaut du navigateur.

Voici le code de solution que j'ai trouvé, ce que j'ai écrit sur ma page Maître.

 function closeMe(evt) { if (typeof evt == 'undefined') { evt = window.event; } if (evt && evt.clientX >= (window.event.screenX - 150) && evt.clientY >= -150 && evt.clientY <= 0) { return "Do you want to log out of your current session?"; } } window.onbeforeunload = closeMe; 

Cela ne peut pas être fait à l'aide de chrome maintenant pour éviter le spam, reportez-vous à javascript onbeforeunload n'indiquant pas de message personnalisé pour plus de détails.

  <script type="text/javascript"> window.onbeforeunload = function(evt) { var message = 'Are you sure you want to leave?'; if (typeof evt == 'undefined') { evt = window.event; } if (evt) { evt.returnValue = message; } return message; } </script> 

Référez-vous à http://www.codeprojectdownload.com

J'ai eu ce même problème et cela m'a rendu fou. Je voulais me débarrasser complètement du pop-up car je ne voulais pas avertir l'utilisateur: il suffit de les prendre d'un formulaire à une nouvelle page. J'ai essayé les réponses ci-dessus et je n'ai pas pu faire fonctionner.

Finalement, j'ai empêché le popup par défaut de Firefox, avec l'aide de ce site: http://code-maven.com/prevent-leaving-the-page-using-plain-javascript . Il est ajouté avant de rediriger la fenêtre:

 window.onbeforeunload = function() { if (data_needs_saving()) { return ""; } else { return ""; } }; window.location.href = 'www.redirect here'; 

Qu'utilise la version spécialisée de la commande "bind" "one". Une fois que le gestionnaire d'événements s'exécute la première fois, il est automatiquement supprimé en tant que gestionnaire d'événements.

 $(window).one("beforeunload", BeforeUnload);