JavaScript prima di lasciare la pagina

234

Voglio confermare prima che l'utente lasci la pagina. Se dice ok, reindirizzerebbe a una nuova pagina o si annullerebbe per andarsene. Ho provato a farlo con onunload

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

Ma conferma dopo che la pagina è già chiusa? Come farlo correttamente?

Sarebbe ancora meglio se qualcuno mostra come farlo con jQuery?

javascript jquery

— KD7
fonte

1

ah ah ah ... Sì, è vero ... ma per fortuna non è il mio sito ... il mio cliente chiede di farlo dalla sua parte

— kd7

25

Sì, ma sono davvero felice di vedere quegli avvisi quando sto per uscire da una pagina Gmail non salvata.

— Etdashou,

Nota, su Firefox 4+ viene visualizzato solo un messaggio predefinito invece del tuo messaggio personalizzato developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Notes

— baptx

4

Possibile duplicato dell'utente Avvisa prima di lasciare la pagina Web con modifiche non salvate

— Wasim A.

352

onunload(o onbeforeunload) non può reindirizzare l'utente a un'altra pagina. Questo per motivi di sicurezza.

Se vuoi mostrare un messaggio prima che l'utente lasci la pagina, usa onbeforeunload:

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

O con jQuery:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

Questo chiederà semplicemente all'utente se desidera lasciare la pagina o meno, non puoi reindirizzarli se scelgono di rimanere nella pagina. Se scelgono di uscire, il browser andrà dove gli hanno detto di andare.

Puoi utilizzare onunloadper fare cose prima che la pagina venga scaricata, ma non puoi reindirizzare da lì (Chrome 14+ blocca gli avvisi all'interno onunload):

window.onunload = function() {
    alert('Bye.');
}

O con jQuery:

$(window).unload(function(){
  alert('Bye.');
});

— Rocket Hazmat
fonte

12

@Joseph: quando si restituisce una stringa da onbeforeunload, il browser inserisce quella stringa nella propria casella di conferma. L'uso confirmè inutile in onunloade onbeforeunload, poiché solo il browser può controllare dove va, non tu. Dai

— Rocket Hazmat il

7

Solo una nota, se si desidera visualizzare in modo condizionale un messaggio onbeforeunload, return falseil browser mostrerà "falso" in una finestra di dialogo. È necessario return undefinedse si desidera chiudere la finestra senza alcun avviso utente.

— Dan Fitch,

5

@Adam: Firefox ha deciso di non consentire la personalizzazione di quel messaggio. Fa parte del browser, quindi non è possibile ignorare quel comportamento. Altri browser potrebbero anche rimuovere la possibilità di personalizzare il messaggio. Vedi: developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…

— Rocket Hazmat

8

Anche @RocketHazmat Chrome. Ora dice solo: vuoi lasciare questo sito? Le modifiche apportate potrebbero non essere salvate.

— programmatore

6

@ programmer5000 Va bene perché alcuni siti Web dannosi possono mostrare alcuni avvisi inutili (ad esempio "Non puoi andartene senza fornire i tuoi dati bancari")

— Naman

34

Questo codice quando si rileva anche lo stato del modulo è cambiato o meno.

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

Puoi utilizzare la funzione di serializzazione dei moduli di Google JQuery, che raccoglierà tutti gli input dei moduli e li salverà nella matrice. Immagino che questo spieghi sia abbastanza :)

— Wasim A.
fonte

qualche idea sul perché questo non funzionerebbe? Potrebbe essere sovrascritto da altre funzioni js / plugin jquery? Sto eseguendo un'app webrtc e vorrei "chiudere" alcune cose quando il client chiude la finestra, quindi la necessità di gestire la chiusura della finestra.

— Ehi,

1

questo può essere sovrascritto da qualsiasi altro plug-in ecc., principalmente lo sviluppatore ha commesso un errore con il selettore, se hai dubbi sulla sovrascrittura, metti il tuo codice jquery prima della chiusura del tag </body>.

— Wasim A.

Sì ... se si dispone di un codice JS che nasconde o disabilita i campi di input dopo che la pagina è stata caricata, quando si esegue il controllo per confrontare i campi nascosti \ disabilitati non verrà serializzato. Il controllo fallirà ovviamente. ;) C'è questa soluzione: stackoverflow.com/a/4748748/114029

— Leniel Maccaferri

A proposito ... c'è un modo migliore qui: stackoverflow.com/q/16322042/114029

— Leniel Maccaferri

1

Va notato che ciò genererà anche un avviso quando si preme il pulsante di invio. si potrebbe serializzare nuovamente il modulo facendo clic sul pulsante di invio per evitarlo.

— Adam,

19

Questo avviserà all'uscita dalla pagina corrente

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>

— Ajit Singh
fonte

14

Questo è quello che ho fatto per mostrare il messaggio di conferma proprio quando ho dati non salvati

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }

la restituzione di "non definito" disabiliterà la conferma

Nota: la restituzione di "null" non funzionerà con IE

Inoltre puoi usare "undefined" per disabilitare la conferma

window.onbeforeunload = undefined;

— Mina Matta
fonte

11

Per avere un popop con Chrome 14+, devi fare quanto segue:

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

All'utente verrà chiesto se desidera rimanere o partire.

— David Bélanger
fonte

Qualche idea sul perché questo non funziona? Sto usando Chrome (ultima versione) insieme a una serie di plugin jquery ma non ricevo alcun avviso quando chiudo la finestra.

— Ehi,

@hey Perché il voto negativo? Funziona .... Devi assicurarti che sia esterno jQuery(document)e ti suggerisco di metterlo subito dopo aver caricato tutti i tuoi plugin. Inoltre, questo frammento non fa alcun avviso ... è solo una demo con return.

— David Bélanger,

7

È possibile utilizzare il seguente one-liner per chiedere sempre all'utente prima di lasciare la pagina.

window.onbeforeunload = s => "";

Per chiedere all'utente quando è stato modificato qualcosa nella pagina, vedere questa risposta .

— spencer.sm
fonte

funziona anche se aggiorno la pagina o esco di nuovo?

— Si8,

Sì, si attiverà su un aggiornamento o su un'uscita.

— spencer.sm,

C'è un modo per sapere quando è rinfrescato vs quando è la prima volta?

— Si8,

Quando un utente arriva alla pagina per la prima volta invece che l'utente aggiorna la pagina.

— Si8,

Oh no Non verrà attivato quando un utente arriva alla pagina per la prima volta. Solo quando si chiude o si cambia pagina o si aggiorna.

— spencer.sm,

4

Normalmente si desidera mostrare questo messaggio, quando l'utente ha apportato modifiche in un modulo, ma non vengono salvate.

Adotta questo approccio per mostrare un messaggio, solo quando l'utente ha cambiato qualcosa

var form = $('#your-form'),
  original = form.serialize()

form.submit(function(){
  window.onbeforeunload = null
})

window.onbeforeunload = function(){
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'
}

— Simon Franzen
fonte

3

<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<script>
function myFunction() {
    return "Write something clever here...";
}
</script>

</body>
</html>

https://www.w3schools.com/tags/ev_onbeforeunload.asp

— Emir Mamashov
fonte

2

La maggior parte delle soluzioni qui non ha funzionato per me, quindi ho usato quella trovata qui

Ho anche aggiunto una variabile per consentire o meno la casella di conferma

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});

— Raj Sharma
fonte

1

Solo un po 'più utile, abilitare e disabilitare

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');

— l2aelba
fonte