2009-11-26 14 views
11

Ho un sistema in cui voglio verificare con l'utente se è sicuro di voler lasciare la pagina una volta impostato un flag sporco.Impostazione onbeforeunload sull'elemento body in Chrome e IE utilizzando jQuery

Sto usando il seguente codice: in FireFox, posso guardare l'origine della pagina tramite FireBug e il tag ha correttamente l'attributo onbeforeunload inserito in esso.

In Chrome e FireFox, questo non accade però e sono in grado di navigare lontano dalla pagina senza alcun avviso. La linea jQuery per aggiornare il body tag è sicuramente in esecuzione, semplicemente non lo sta eseguendo.

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

Qualche idea su come procedere da qui?

+0

sono stato in grado di utilizzare $ ("body") css ("margine", "50px."); e $ ("body"). Attr ("test", "ciao"); sembra proprio che non riesco a impostare l'attributo onbeforeunload ora ... – Graeme

risposta

17

non è possibile interrompere la pagina di scarico restituendo false. è necessario restituire una stringa che verrà mostrata all'utente in una finestra di messaggio, e decide se vuole uscire o rimanere sulla pagina (selezionando il pulsante "OK" o "Annulla"), quindi è necessario scrivere il codice come questo:

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

provare questo

<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> 
+0

Omg omg! Mi hai salvato la giornata. Sembra che krcko abbia torto nella sua ipotesi: "Non puoi interrompere la pagina di scarico restituendo false". Oppure non è * preciso * abbastanza. Sembra che (con IE ** solo **) se l'evento "onbeforeload" restituisce false, non viene visualizzato nulla. Quindi il codice su cui sto lavorando restituiva false e nessun messaggio con IE, ma ** sempre ** un messaggio che mostrava "false" e chiedeva di andarsene. La tua soluzione funziona per tutti i browser. ** '(Grazie) ³²' **. –

+0

ottima soluzione, grazie mille – Dorgham

1

Controllare questo codice:

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(); 
}); 
0

Questi script wor k ottimo, ma cosa succede se voglio attivare una chiamata AJAX quando l'utente conferma la finestra chiusa?

Ho provato questo, ma la chiamata AJAX viene sparato sia se l'utente fa clic su "sì, vicino" o "no, resta qui" (provato su 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; 
     } 
    } 
} 
+0

Si prega di identificare il tipo di evento, e questa dovrebbe essere una nuova domanda, non una risposta? – MarmiK

0

E 'non abbastanza, ma ha fatto il trucco

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; 
Problemi correlati