Come posso sostituire la finestra di dialogo OnBeforeUnload e sostituirla con la mia?

Question

Devo avvisare gli utenti delle modifiche non salvate prima che lascino una pagina (un problema abbastanza comune).

window.onbeforeunload=handler

Funziona ma genera una finestra di dialogo predefinita con un messaggio standard irritante che avvolge il mio testo. Devo sostituire completamente il messaggio standard, quindi il mio testo è chiaro, o (ancora meglio) sostituire l'intera finestra di dialogo con una finestra di dialogo modale utilizzando jQuery.

Finora ho fallito e non ho trovato nessun altro che sembra avere una risposta. È anche possibile?

Javascript nella mia pagina:

<script type="text/javascript">   
   window.onbeforeunload=closeIt;
</script>

La funzione closeIt ():

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

Usando jQuery e jqModal ho provato questo tipo di cose (usando una finestra di conferma personalizzata):

$(window).beforeunload(function() {
        confirm('new message: ' + this.href + ' !', this.href);
        return false;
    });

che inoltre non funziona - non riesco a legarmi all'evento beforeunload.

Answer 1

Non puoi modificare la finestra di dialogo predefinita per onbeforeunload , quindi la soluzione migliore potrebbe essere quella di lavorare con essa.

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

Ecco un riferimento a questo da Microsoft :

  

Quando una stringa viene assegnata alla proprietà returnValue di window.event, viene visualizzata una finestra di dialogo che offre agli utenti la possibilità di rimanere sulla pagina corrente e conservare la stringa che le è stata assegnata. L'istruzione predefinita che appare nella finestra di dialogo, " Sei sicuro di voler uscire da questa pagina? ... Premi OK per continuare o Annulla per rimanere nella pagina corrente. & Quot ;, non può essere rimosso o modificato.

Il problema sembra essere:

1. Quando viene chiamato onbeforeunload , prenderà il valore di ritorno del gestore come window.event.returnValue .
2. Quindi analizzerà il valore restituito come stringa (a meno che non sia null).
3. Poiché false viene analizzato come una stringa, la finestra di dialogo si attiverà, quindi passerà un true / false appropriato.

Il risultato è che non sembra esserci un modo per assegnare false a onbeforeunload per impedirlo dalla finestra di dialogo predefinita.

Note aggiuntive su jQuery:

• L'impostazione dell'evento in jQuery potrebbe essere problematica, in quanto ciò consente che si verifichino anche altri eventi onbeforeunload . Se desideri solo che si verifichi il tuo evento di scaricamento, mi atterrerei al semplice JavaScript per esso.

• jQuery non ha una scorciatoia per onbeforeunload quindi dovresti usare la sintassi bind generica.

  $(window).bind('beforeunload', function() {} );
  

Modifica 09/04/2018 : i messaggi personalizzati nelle finestre di dialogo onunforeload sono obsoleti a partire da chrome-51 (cfr: nota di rilascio )

Answer 2

Ciò che ha funzionato per me, usando jQuery e testato in IE8, Chrome e Firefox, è:

$(window).bind("beforeunload",function(event) {
    if(hasChanged) return "You have unsaved changes";
});

È importante non restituire nulla se non è richiesto alcun prompt in quanto vi sono differenze tra IE e altri comportamenti del browser qui.

Answer 3

Sebbene in alcune circostanze non ci sia nulla che tu possa fare riguardo al riquadro, puoi intercettare qualcuno facendo clic su un link. Per me, questo è valsa la pena per la maggior parte degli scenari e come fallback, ho lasciato l'evento di scarico.

Ho usato Boxy invece della finestra di dialogo standard di jQuery, è disponibile qui: http: // onehackoranother.com/projects/jquery/boxy/

$(':input').change(function() {
    if(!is_dirty){
        // When the user changes a field on this page, set our is_dirty flag.
        is_dirty = true;
    }
});

$('a').mousedown(function(e) {
    if(is_dirty) {
        // if the user navigates away from this page via an anchor link, 
        //    popup a new boxy confirmation.
        answer = Boxy.confirm("You have made some changes which you might want to save.");
    }
});

window.onbeforeunload = function() {
if((is_dirty)&&(!answer)){
            // call this if the box wasn't shown.
    return 'You have made some changes which you might want to save.';
    }
};

Potresti collegarti a un altro evento e filtrare di più su quale tipo di ancoraggio è stato fatto clic, ma questo funziona per me e cosa voglio fare e serve da esempio per gli altri da utilizzare o migliorare. Ho pensato di condividere questo per coloro che desiderano questa soluzione.

Ho tagliato il codice, quindi potrebbe non funzionare così com'è.

Answer 4

1) Utilizzare onbeforeunload, non onunload.

2) L'importante è evitare di eseguire una dichiarazione di ritorno. Con questo non intendo evitare di tornare dal tuo gestore. Restituisci tutto bene, ma lo fai assicurandoti di raggiungere la fine della funzione e NON eseguire un'istruzione return. In queste condizioni non si verifica la finestra di dialogo standard integrata.

3) Se si utilizza onbeforeunload, è possibile eseguire una chiamata ajax nel gestore unbeforeunload per riordinare il server, ma deve essere sincrono e si deve attendere e gestire la risposta nel gestore onbeforeunload (sempre rispettando la condizione (2) sopra). Lo faccio e funziona benissimo. Se si effettua una chiamata Ajax sincrona, tutto viene trattenuto fino a quando non viene restituita la risposta. Se lo fai in modo asincrono, pensando che non ti interessi alla risposta dal server, lo scaricamento della pagina continua e la tua chiamata ajax viene interrotta da questo processo, incluso uno script remoto se è in esecuzione.

Answer 5

Prova a inserire un return; invece di un messaggio .. questo funziona per la maggior parte dei browser. (Questo impedisce davvero solo i regali di dialogo)

window.onbeforeunload = function(evt) {            
        //Your Extra Code
        return;
}

Answer 6

È possibile rilevare quale pulsante (ok o annulla) è stato premuto dall'utente, poiché la funzione onunload ha chiamato solo quando l'utente ha scelto di lasciare la pagina. Anche in questa funzione le possibilità sono limitate, perché il DOM è in fase di collasso. È possibile eseguire JavaScript, ma il POST ajax non fa nulla, quindi non è possibile utilizzare questo metodo per il logout automatico. Ma c'è una soluzione per questo. Il window.open ('logout.php') eseguito nella funzione onunload, quindi l'utente si disconnetterà con una nuova apertura della finestra.

function onunload = (){
    window.open('logout.php');
}

Questo codice viene chiamato quando l'utente lascia la pagina o chiude la finestra attiva e l'utente si disconnette da 'logout.php'. La nuova finestra si chiude immediatamente quando il logout php è costituito da codice:

window.close();

Answer 7

Ho affrontato lo stesso problema, stavo bene per avere una propria finestra di dialogo con il mio messaggio, ma il problema che ho dovuto affrontare era: 1) Stava dando un messaggio su tutte le navigazioni, lo voglio solo per un clic ravvicinato. 2) con il mio messaggio di conferma, se l'utente seleziona Annulla, mostra ancora la finestra di dialogo predefinita del browser.

Di seguito è riportato il codice delle soluzioni che ho trovato, che ho scritto sulla mia pagina Master.

function closeMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event; }
    if (evt && evt.clientX >= (window.event.screenX - 150) &&
        evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}
window.onbeforeunload = closeMe;

Answer 8

Questo non può essere fatto in Chrome ora per evitare lo spamming, fare riferimento a javascript onbeforeunload non mostra messaggi personalizzati per maggiori dettagli.

Answer 9

 <script type="text/javascript">
        window.onbeforeunload = function(evt) {
            var message = 'Are you sure you want to leave?';
            if (typeof evt == 'undefined') {
                evt = window.event;
            }       
            if (evt) {
                evt.returnValue = message;
            }
            return message;
        } 
    </script>

fai riferimento a http://www.codeprojectdownload.com

Answer 10

Che dire di utilizzare la versione specializzata di " bind " comando "uno". Una volta eseguito il gestore eventi per la prima volta, viene automaticamente rimosso come gestore eventi.

$(window).one("beforeunload", BeforeUnload);