2010-05-18 20 views
22

Quando chiudo la mia pagina su un browser, voglio che venga visualizzata una finestra di messaggio e mi chieda se voglio davvero chiudere la pagina o meno, con due pulsanti e se clicco su No la scheda non sarà chiusa.Chiedere conferma quando si chiude una scheda

Come posso farlo?

+1

possibile duplicato di [Chiama alcuni JavaScript quando l'utente chiude una finestra (popup)] (http://stackoverflow.com/questions/1333833/call-some-javascript-when-the-user-close- a-popup-window) –

+0

possibile dupli cate di [javascript per verificare quando la finestra del browser è chiusa] (http://stackoverflow.com/questions/805463/javascript-to-check-when-the-browser-window-is-close) – CMS

risposta

41

È necessario ascoltare l'evento non-standard beforeunload. Questo è supportato da quasi tutti i browser, si aspetta da Opera, che è noto per rispettare gli standard W3C estremamente rigorosamente.

Ecco un esempio kickoff:

window.onbeforeunload = function() { 
    return "Hey, you're leaving the site. Bye!"; 
}; 

Questo messaggio verrà visualizzato in natura di un dialogo di conferma. Questo messaggio apparirà a destra prima del il client scarica la pagina. Questo può essere un browser chiuso, ma che può anche essere una semplice azione di navigazione come fare clic su un link o inviare un modulo nella pagina!

Probabilmente si desidera anche disattivarlo (è sufficiente impostare su null) ogni volta che si fa clic su un collegamento interno o viene inviato un modulo interno. Ovvero non vuoi infastidire gli utenti con un comportamento non intuitivo. È possibile farlo ascoltando l'evento click dei collegamenti desiderati e l'evento submit dei moduli desiderati. jQuery può essere di grande aiuto qui perché lo fa in maniera crossbrowsercompatible in modo che non c'è bisogno di scrivere> 20 righe di codice JS per questo:

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> 
    window.onbeforeunload = function() { 
     return "You're leaving the site."; 
    }; 
    $(document).ready(function() { 
     $('a[rel!=ext]').click(function() { window.onbeforeunload = null; }); 
     $('form').submit(function() { window.onbeforeunload = null; }); 
    }); 
</script> 

Hai solo bisogno di dare a tutti i link esterni lo standard di fatto attributo rel="ext" per indicare che si tratta di collegamenti esterni.

<a href="http://google.com" rel="ext">Google</a> 
+0

Non hai per staccare la funzione 'onbeforeunload' se non si desidera visualizzare la finestra di avviso. Lascia che la funzione non restituisca nulla e il browser proceda come previsto (chiudendo la finestra, tornando indietro nella cronologia, ecc.). –

+0

@Marcel: Questo è davvero un altro modo per disattivare la funzione. Ciò richiede comunque un approccio globale e vorrei evitarli il più possibile. – BalusC

+0

Se l'aggiunta dell'attributo rel = "ext" non è fattibile, è anche possibile confrontare la posizione href del collegamento con la pagina corrente. $ ('a [href * = "' + window.location.host + '"]') –

5

utilizzare l'evento onbeforeunload

window.onbeforeunload = function(){ 
    return "Are you sure you want to close the window?"; 
} 

Verrà visualizzata una messagebox in cui l'utente può scegliere se chiudere o meno la finestra.

Si noti che questo non è supportato da Opera.

7

onbeforeunload incendi prima onunload.

Non è possibile annullare l'evento in onunload. onbeforeunload consente di restituire una stringa dagli eventi (ad esempio window.onbeforeunload = function() {return "really leave now?"} e il browser chiederà all'utente se desidera lasciare la pagina. La pagina non ha voce per fermare l'evento se si fa clic su "Sì" (è così che dovrebbe essere anche a mio parere)

punti generali:.

  • alert, prompt e confirm non sono ammessi in entrambi gli eventi
  • Né è supportato in Opera..

ATTENZIONE: in IE6/7 almeno (e possibilmente IE8 ma non FF/Chrome ecc) onbeforeunload e onunload vengono attivati ​​quando ancore/link JavaScript sono cliccato su. Alcuni esempi:

  • <a href="#myanchor">trigger unload!</a>
  • <a href="javascript: alert('message!')">trigger unload!</a>

(MSDN è un buon fonte come qualsiasi, visto che è non-standard e che Firefox/Chrome/Safari sembra in gran parte aver copiato l'attuazione da IE.)

Problemi correlati