Intercepter l'événement de sortie de la page

Lors de l'édition d'une page dans mon système, un utilisateur peut décider de naviguer vers un autre site Web et peut ainsi perdre toutes les modifications qu'il n'a pas sauvegardées.

Je voudrais intercepter toute tentative d'aller à une autre page et demander à l'utilisateur de s'assurer qu'ils veulent que cela se produise car ils pourraient potentiellement perdre leur travail actuel.

Gmail fait cela de manière très similaire. Par exemple, rédigez un nouveau courrier électronique, commencez à taper dans le corps du message et entrez un nouvel emplacement dans la barre d'adresse (par exemple, twitter.com ou quelque chose). Il demandera "Êtes-vous sûr?"

Des idées pour répliquer cela? Je cible IE8, mais je souhaite être compatible avec FF et Chrome aussi.

Similaire à la réponse de Ghommey, mais cela prend également en charge les anciennes versions d'IE et de Firefox.

window.onbeforeunload = function (e) { var message = "Your confirmation message goes here.", e = e || window.event; // For IE and Firefox if (e) { e.returnValue = message; } // For Safari return message; };

Voir cet article. La fonctionnalité que vous recherchez est la surcharge

Exemple de code:

  <script language="JavaScript"> window.onbeforeunload = confirmExit; function confirmExit() { return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?"; } </script>

Au lieu d'un popup de confirmation de dérangement, il serait bon de laisser tomber un peu (question de millisecondes) pour gérer avec succès la publication des données non sauvegardées sur le serveur, que j'ai géré sur mon site en utilisant le texte fictif de la console comme ceci:

 window.onbeforeunload=function(e){ // only take action (iterate) if my SCHEDULED_REQUEST object contains data for (var key in SCHEDULED_REQUEST){ postRequest(SCHEDULED_REQUEST); // post and empty SCHEDULED_REQUEST object for (var i=0;i<1000;i++){ // do something unnoticable but time consuming like writing a lot to console console.log('buying some time to finish saving data'); }; break; }; }; // no return string --> user will leave as normal but data is send to server

Edit: Voir aussi Synchronous_AJAX et comment faire avec jquery

J'ai des utilisateurs qui n'ont pas rempli toutes les données requises.

 <cfset unloadCheck=0>//a ColdFusion precheck in my page generation to see if unload check is needed var erMsg=""; $(document).ready(function(){ <cfif q.myData eq ""> <cfset unloadCheck=1> $("#myInput").change(function(){ verify(); //function elsewhere that checks all fields and populates erMsg with error messages for any fail(s) if(erMsg=="") window.onbeforeunload = null; //all OK so let them pass else window.onbeforeunload = confirmExit(); //borrowed from Jantimon above; }); }); <cfif unloadCheck><!--- if any are outstanding, set the error message and the unload alert ---> verify(); window.onbeforeunload = confirmExit; function confirmExit() {return "Data is incomplete for this Case:"+erMsg;} </cfif>