JavaScript avant de quitter la page

Je souhaite faire une confirmation avant que l'utilisateur ne quitte la page. S'il dit correct, il redirige vers une nouvelle page ou annule pour partir. J'ai essayé de le faire avec une surcharge

<script type="text/javascript"> function con() { var answer = confirm("do you want to check our other products") if (answer){ alert("bye"); } else{ window.location = "http://www.example.com"; } } </script> </head> <body onunload="con();"> <h1 style="text-align:center">main page</h1> </body> </html>

Mais cela confirme-t-il si la page est déjà fermée? Comment le faire correctement?

Ce serait encore mieux si quelqu'un montre comment le faire avec jQuery?

onunload (ou la onbeforeunload ) ne peut pas rediriger l'utilisateur vers une autre page. C'est pour des raisons de sécurité.

Si vous souhaitez afficher une invite avant que l'utilisateur quitte la page, utilisez onbeforeunload :

 window.onbeforeunload = function(){ return 'Are you sure you want to leave?'; };

Ou avec jQuery:

 $(window).bind('beforeunload', function(){ return 'Are you sure you want to leave?'; });

Cela demandera simplement à l'utilisateur s'il veut quitter la page ou non, vous ne pouvez pas les rediriger si elles choisissent de rester sur la page. S'ils choisissent de partir, le navigateur ira où ils l'ont dit.

Vous pouvez utiliser la onunload pour faire des choses avant que la page ne soit déchargée, mais vous ne pouvez pas rediriger à partir de là (les alarmes de Chrome 14+ blocks ne sont pas onunload ):

 window.onunload = function() { alert('Bye.'); }

Ou avec jQuery:

 $(window).unload(function(){ alert('Bye.'); });

Ce code lorsque vous détectez également l'état du formulaire modifié ou non.

 $('#form').data('serialize',$('#form').serialize()); // On load save form current state $(window).bind('beforeunload', function(e){ if($('#form').serialize()!=$('#form').data('serialize'))return true; else e=null; // ie; if form state change show warning box, else don't show it. });

Vous pouvez utiliser la fonction Google JQuery Form Serialize, cela rassemblera toutes les entrées de formulaire et l'enregistrer dans le tableau. Je suppose que cette explication suffit 🙂

Cela va alerter en quittant la page actuelle

 <script type='text/javascript'> 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; </script>

Pour avoir un popop avec Chrome 14+, vous devez effectuer les opérations suivantes:

 jQuery(window).bind('beforeunload', function(){ return 'my text'; });

On demandera à l'utilisateur s'il veut rester ou partir.

Vous pouvez utiliser le mode One-Liner suivant pour toujours demander à l'utilisateur avant de quitter la page.

 window.onbeforeunload = s => "";

Pour demander à l'utilisateur lorsque quelque chose sur la page a été modifié, voir cette réponse .

C'est ce que j'ai fait pour montrer le message de confirmation juste quand j'ai des données non enregistrées

 window.onbeforeunload = function () { if (isDirty) { return "There are unsaved data."; } return undefined; }

Le retour "indéfini" désactivera la confirmation

Remarque: renvoyer "null" ne fonctionnera pas avec IE

Vous pouvez également utiliser "undefined" pour désactiver la confirmation

 window.onbeforeunload = undefined;