Réglage onbeforeunload sur l'élément de corps dans Chrome et IE en utilisant jQuery

Question

J'ai un système où je veux vérifier avec l'utilisateur s'ils sont sûrs qu'ils veulent quitter la page une fois un drapeau sale est réglé.

J'utilise le code suivant - Dans FireFox, je peux regarder la source de la page par Firebug et la balise a correctement l'attribut onbeforeunload inséré dedans.

Chrome et FireFox, cela ne se produit pas et si je suis en mesure de naviguer loin de la page sans avertissement. La ligne jQuery pour mettre à jour la balise body est définitivement exécutée, elle ne l'exécute pas.

if ($("body").attr('onbeforeunload') == null) { 
    if (window.event) { 
     // IE and Chrome use this 
     $("body").attr('onbeforeunload', 'CatchLeavePage(event)'); 
    } 
    else { 
     // Firefox uses this 
     $("body").attr('onbeforeunload', 'return false;CatchLeavePage(event)'); 
    } 
} 

Des idées comment procéder à partir d'ici?

Answer 1

vous ne pouvez pas annuler le déchargement de page en retournant false. vous devez retourner la chaîne qui sera montrée à l'utilisateur dans une boîte de message, et il décide s'il veut partir ou rester sur la page (en sélectionnant le bouton 'OK' ou 'Annuler'), ainsi vous devez écrire votre code comme ceci:

window.onbeforeunload = function() { 
    return "Are you sure you want to leave this page bla bla bla?"; // you can make this dynamic, ofcourse... 
}; 

Answer 2

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

Answer 3

essayer

<script type=\"text/javascript\"> 
     var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation 
     var leave_message = 'You sure you want to leave?' 
     function goodbye(e) 
     { 
      if(dont_confirm_leave!==1) 
      { 
       if(!e) e = window.event; 
       //e.cancelBubble is supported by IE - this will kill the bubbling process. 
       e.cancelBubble = true; 
       e.returnValue = leave_message; 
       //e.stopPropagation works in Firefox. 
       if (e.stopPropagation) 
       { 
        e.stopPropagation(); 
        e.preventDefault(); 
       } 

       //return works for Chrome and Safari 
       return leave_message; 
      } 
     } 
    window.onbeforeunload=goodbye; 
    </script> 

Answer 4

Vérifiez ce code:

var validNavigation = false; 

function wireUpEvents() { 
var dont_confirm_leave = 0; 
var leave_message = "You sure you want to leave ?"; 

function goodbye(e) { 
if (!validNavigation) { 
if (dont_confirm_leave !== 1) { 
if (!e) e = window.event; 
e.cancelBubble = true; 
e.returnValue = leave_message; 
//e.stopPropagation works in Firefox. 
if (e.stopPropagation) { 
e.stopPropagation(); 
e.preventDefault(); 
} 
//return works for Chrome and Safari 
return leave_message; 
} 
} 
} 

window.onbeforeunload = goodbye; 

document.onkeydown = function() { 
switch (event.keyCode || e.which) { 
case 116 : //F5 button 
validNavigation = true; 
case 114 : //F5 button 
validNavigation = true; 
case 82 : //R button 
if (event.ctrlKey) { 
validNavigation = true; 
} 
case 13 : //Press enter 
validNavigation = true; 
} 

} 
// Attach the event click for all links in the page 
$("a").bind("click", function() { 
validNavigation = true; 
}); 

// Attach the event submit for all forms in the page 
$("form").bind("submit", function() { 
validNavigation = true; 
}); 

// Attach the event click for all inputs in the page 
$("input[type=submit]").bind("click", function() { 
validNavigation = true; 
}); 
} 

// Wire up the events as soon as the DOM tree is ready 
$(document).ready(function() { 
wireUpEvents(); 
}); 

Answer 5

Ces scripts wor k super, mais que faire si je veux déclencher un appel AJAX lorsque l'utilisateur confirme la fermeture de la fenêtre?

J'ai essayé, mais l'appel AJAX est tiré à la fois si l'utilisateur clique sur « oui, fermer » ou « non, rester ici » (essayé sur Firefox 38.x)

function goodbye(e) { 
    if (!validNavigation) { 
     if (dont_confirm_leave !== 1) { 
      if (!e) e = window.event; 
      e.cancelBubble = true; 
      e.returnValue = leave_message; 
      //e.stopPropagation works in Firefox. 
      if (e.stopPropagation) { 
       e.stopPropagation(); 
       e.preventDefault(); 
      } 

      $.ajax({ 
       async: false, 
       url: "/launch-my-script.php" 
      }); 

      //return works for Chrome and Safari 
      return leave_message; 
     } 
    } 
} 

Answer 6

Ce n'est pas jolie, mais il a fait l'affaire.

var warnclose = true; 
var warn = function(e) { 
    var warning = 'Your warning message.'; 
    if (warnclose) { 
     // Disables multiple calls 
     warnclose = false; 

     // In case we still need warn to be called again 
     setTimeout(function(){ 
      warnclose = true; 
     }, 500); 

     return warning; 
    } 
}; 
window.onbeforeunload = warn;