Modo per sapere se l’utente ha fatto clic su Annulla su una finestra di dialogo Javascript onbeforeunload?

Sto spuntando una finestra di dialogo quando qualcuno cerca di allontanarsi da una determinata pagina senza aver salvato il proprio lavoro. Uso l’evento onbeforeunload di Javascript, funziona alla grande.

Ora voglio eseguire qualche codice Javascript quando l’utente fa clic su “Annulla” nella finestra di dialogo che viene visualizzata (dicendo che non vogliono allontanarsi dalla pagina).

È ansible? Sto usando jQuery, quindi c’è forse un evento come beforeunloadcancel a cui posso bind?

AGGIORNAMENTO : L’idea è di salvare e indirizzare gli utenti a una pagina Web diversa se hanno scelto di annullare

Puoi farlo in questo modo:

$(function() { $(window).bind('beforeunload', function() { setTimeout(function() { setTimeout(function() { $(document.body).css('background-color', 'red'); }, 1000); },1); return 'are you sure'; }); }); 

Il codice all’interno del primo metodo setTimeout ha un ritardo di 1 ms. Questo è solo per aggiungere la funzione nella UI queue . Poiché setTimeout viene eseguito in modo asincrono, l’interprete Javascript continuerà chiamando direttamente l’istruzione return , che a sua volta triggers la modal dialog del browser. Ciò bloccherà la UI queue e il codice dal primo setTimeout non verrà eseguito, fino a quando la modale non verrà chiusa. Se l’utente ha premuto annulla, triggers un altro setTimeout che si triggers in circa un secondo. Se l’utente ha confermato con ok, l’utente reindirizza e il secondo setTimeout non viene mai triggersto.

esempio: http://www.jsfiddle.net/NdyGJ/2/

So che questa domanda è vecchia ora, ma nel caso qualcuno abbia ancora problemi con questo, ho trovato una soluzione che sembra funzionare per me,

Fondamentalmente l’evento di unload viene triggersto dopo l’evento beforeunload . Possiamo usarlo per cancellare un timeout creato nell’evento beforeunload , modificando la risposta di jAndy:

 $(function() { var beforeUnloadTimeout = 0 ; $(window).bind('beforeunload', function() { console.log('beforeunload'); beforeUnloadTimeout = setTimeout(function() { console.log('settimeout function'); $(document.body).css('background-color', 'red'); },500); return 'are you sure'; }); $(window).bind('unload', function() { console.log('unload'); if(typeof beforeUnloadTimeout !=='undefined' && beforeUnloadTimeout != 0) clearTimeout(beforeUnloadTimeout); }); }); 

EDIT: jsfiddle qui

Non pensavo fosse ansible, ma ho appena provato questa idea e funziona (anche se è un po ‘un trucco e potrebbe non funzionare allo stesso modo in tutti i browser):

 window.onbeforeunload = function () { $('body').mousemove(checkunload); return "Sure thing"; }; function checkunload() { $('body').unbind("mousemove"); //ADD CODE TO RUN IF CANCEL WAS CLICKED } 

Non ansible. Forse qualcuno mi dimostrerà che hai torto … Che codice vuoi eseguire? Vuoi salvare automaticamente quando fanno clic su Annulla? Suona contro-intuitivo. Se non si è già auto-salvati, penso che abbia poco senso salvarsi automaticamente quando premono “Annulla”. Forse potresti evidenziare il pulsante di salvataggio nel tuo gestore onbeforeunload in modo che l’utente possa vedere cosa devono fare prima di andare via.

 window.onbeforeunload = function() { if (confirm('Do you want to navigate away from this page?')) { alert('Saving work...(OK clicked)') } else { alert('Saving work...(canceled clicked)') return false } } 

con questo codice anche se l’utente fa clic su “Annulla” in IE8 apparirà la finestra di dialogo di navigazione predefinita.