È possibile attivare l'evento onbeforeunload a livello di codice?

Question

Attualmente sto utilizzando il plug-in jquery-form-observe che utilizza onbeforeunload per richiedere all'utente modifiche "non salvate".

Ma ho uno scenario in cui ho bisogno di attivarlo con un clic del pulsante: il clic del pulsante in ultima analisi porta alla modifica della pagina, ma voglio chiedere all'utente prima che inizi il processo che il clic del pulsante dà il via ..

Quindi c'è un modo per attivare onbeforeunload attraverso jQuery o in altro modo?

Answer 1

Non so se esiste un modo diretto per farlo, ma è sempre possibile emulare la casella di conferma del browser. Ecco una semplice funzione ho cucinato in base alla specs at MSDN:

function triggerBeforeUnload() { 
    var event = {}; 
    handler(event); 

    if (typeof event.returnValue == 'undefined' || 
     confirm('Are you sure you want to navigate away from this page?\n\n' + event.returnValue + '\n\nPress OK to continue, or Cancel to stay on the current page.')) { 
    // Continue with page unload 
    } else { 
    // Cancel page unload 
    } 
} 

Edit: In jquery.formobserver.js, subito dopo la definizione di function beforeunload(e) { ... }, aggiungere questa riga:

handler = beforeunload; 

nota il cambiamento in originale codice: window.onbeforeunload è stato sostituito da handler.

Answer 2

È possibile farlo con il metodo .trigger():

$('button').click(function(){ 
    $(window).trigger('beforeunload'); 
}); 

Answer 3

mi sono imbattuto in questa domanda durante la ricerca di risposte alla mia domanda che era simile in natura. Quindi, ho trovato una soluzione qui. Avevo bisogno di chiamare "onbeforeunload" solo quando un utente fa clic su un pulsante specifico e nessuno degli altri. Spero che questo chiarisca la tua domanda.

Ho ottenuto il lavoro in jsfiddle. Puoi testarlo nella demo che ho impostato e puoi vedere chiaramente che funziona solo con uno dei pulsanti. Tuttavia, c'è un avvertimento, per il quale non mi sono preso la briga di cercare una soluzione. Se fai clic sul pulsante e scegli di rimanere sulla pagina, tutti i pulsanti/link/reindirizzamenti/ricaricamenti successivi attivano "onbeforeunload". Sei libero di inventare il tuo lavoro in giro per il "bug" (per mancanza di migliori termini) per fare in modo che non causi quella reazione se l'utente decide di rimanere sulla pagina. Tuttavia, sta funzionando e esegue ciò che hai chiesto di fare nell'ambiente di test.

Ecco il codice:

$(document).ready(function() { 
     $('.testButton').click(function() { 
      window.onbeforeunload = function() { 
       return "Enter your message here..."; 
      } 
     }); 
    }); 

EDIT:

Così, dopo la ricerca di altri modi per fare la stessa cosa, mi sono imbattuto in un altro modo per legare un evento al pulsante utilizzando .on di jQuery() metodo. Il codice può essere visto here, verificare che il vecchio codice sia commentato. Di nuovo, lo stesso "bug" di prima, ma fornisce ancora le funzionalità richieste.

Ecco l'alternativa:

$(document).ready(function() { 
     $('.testButton').on("click", function (event) { 
      window.onbeforeunload = function() { 
       return "Enter your message here..."; 
      } 
     }); 
    });