web-dev-qa-db-fra.com

Interception d'événement de sortie de page

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

Je voudrais intercepter toute tentative d’accéder à une autre page et inviter l’utilisateur à s’assurer qu’il souhaite que cela se produise, au risque de perdre son travail actuel.

Gmail le fait d'une manière très similaire. Par exemple, composez 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 du genre). Il vous demandera "Êtes-vous sûr?"

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

javascriptjavascript-eventsinternet-explorer
114
Chris Ballance

Similaire à la réponse de Ghommey, mais cela prend également en charge les anciennes versions de IE et 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;
};
142
Eli Grey

Voir cet article. La fonctionnalité que vous recherchez est le 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>
23
jantimon

Au lieu d’un popup de confirmation ennuyeux, il serait agréable de retarder de partir juste un peu (quelques millisecondes) à gérer pour poster avec succès les données non sauvegardées sur le serveur, 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 le faire avec jquery

6
Remi

J'ai des utilisateurs qui n'ont pas complété 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>
0
gordon