Événement de sortie de page d'interception

Lors de la modification d'une page dans mon système, un utilisateur peut décider de naviguer vers un autre site Web et, ce faisant, perdre toutes les modifications qu'il n'a pas enregistrées.

Je voudrais intercepter toute tentative d'aller sur une autre page et inviter l'utilisateur à être sûr qu'il souhaite que cela se produise, car il pourrait potentiellement perdre son travail actuel.

Gmail fait cela de manière très similaire. Par exemple, rédigez un nouvel e-mail, 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 vous demandera "Êtes-vous sûr?"

Des idées comment reproduire cela? Je cible IE8, mais j'aimerais également être compatible avec FF et Chrome.

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;
};

Consultez cet article. La fonctionnalité que vous recherchez est la fonction onbeforeunload

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'une fenêtre contextuelle de confirmation ennuyeuse, il serait bien de retarder un peu de laisser un peu (question de millisecondes) pour gérer avec succès la publication des données non enregistrées sur le serveur, ce que j'ai géré pour mon site en écrivant un texte factice sur 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 cela 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>