Mostra un avviso quando lasci il sito, non solo la pagina

Sembrava qualcosa di quasi imansible da fare quando mi è stato presentato. So che è ansible visualizzare una finestra di dialogo per confermare quando si esce da una pagina web. Ma è ansible visualizzare una finestra di dialogo quando si esce da un sito?

Non sono stato in grado di trovare / creare nulla che possa leggere la barra degli indirizzi e sapere che stai lasciando il sito.

Prima di tutto definire quali eventi possono effettivamente portare l’utente lontano dal tuo sito?

  1. Un clic di un link all’interno del contenuto del tuo sito web
  2. Un invio di un modulo a un’azione esterna
  3. Un javascript da una finestra figlio che cambia window.location sul suo genitore
  4. Utente che avvia una ricerca nella barra di ricerca (FF e IE)
  5. Utente che inserisce una ricerca / indirizzo nella barra degli indirizzi del browser.
  6. Utente che ha premuto un pulsante indietro (o backspace) quando è appena arrivato al tuo sito
  7. L’utente ha premuto un pulsante avanti (o shift-backspace) quando si trovava fuori dal sito prima, ma è tornato accedendo tramite la funzionalità del pulsante Indietro
  8. L’utente chiude la finestra del browser

Così. cosa puoi fare per tutto questo?

  1. Questi sono facili. Controlla le tue ancore e, se puntano all’esterno, aggiungi alcune funzionalità nell’evento onclick
  2. Simile a 1. Aggiungi la tua funzionalità per l’evento onsubmit del modulo di postback al di fuori del tuo sito.
  3. -> 8. non hanno realmente una soluzione applicabile che possa essere controllata. Puoi abusare dell’evento onbeforeunload quanto vuoi, ma non avrai molto successo di sapere cosa sta succedendo. E ci sono alcune limitazioni relative al onbeforeunload in onbeforeunload , quindi le tue mani saranno legate la maggior parte del tempo.

La vera domanda?

Perché dovresti controllare questo evento in ogni caso, tranne che preoccupare i tuoi utenti di non lasciarti. L’accattonaggio non dà molta giustizia nel mondo del web. E quando qualche sito mi infastidisce con i messaggi o, peggio, mi impedisce di andarmene, non vorrei più tornare indietro. Odora di ctriggers ctriggers usabilità e dà un touch di sito adware.

Piuttosto, cerca di mantenere i tuoi utenti interessati fornendo loro contenuti di valore.

La tua migliore scommessa è ascoltare l’evento beforeunload non standard. Questo è supportato da quasi tutti i browser, si aspetta da Opera, che è noto per rispettare gli standard W3C estremamente rigorosamente.

Esempio iniziale:

 window.onbeforeunload = function() { return "You're leaving the site."; }; 

Questo messaggio apparirà in una sorta di dialogo di conferma.

Nel tuo caso specifico devi distriggersrlo (basta impostarlo su null ) ogni volta che viene fatto clic su un link di navigazione o viene inviato un modulo interno. Puoi farlo ascoltando l’evento click dei link desiderati e l’evento di submit dei moduli desiderati. jQuery può essere di grande aiuto qui:

 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; }); }); 

Devi solo dare a tutti i link esterni l’attributo defacto standard rel="ext" per indicare che si tratta di link esterni.

 Google 

Questo può aiutare

  1. È necessario controllare l’evento onclick prima di albind initLocalLinkException() ;
  2. Disclaimer : non è testato.

HTML :

 internal link html anchor external link blank external link 

JavaScript :

 $(document).ready(function () { initLocalLinkException(); window.onbeforeunload = function () { confirmExit() }; $('form').submit(function () { window.onbeforeunload = null; }); }); function initLocalLinkException() { $('a').click(function () { if ($(this).attr('target') != '_blank') { var link = $(this).attr('href'); if (link.substr(0, 4) == 'http') { var LocalDomains = new Array('http://www.yourdomain.com', 'https://yourdomain.com', 'localhost', '127.0.0.1'); var matchCount = 0; $.each(LocalDomains, function () { if (this == link.substr(0, this.length)) { matchCount++; } }); if (matchCount == '0') { confirmExit(); } else { window.onbeforeunload = null; } } else { window.onbeforeunload = null; } } }); } function confirmExit() { alert('Are you sure?'); // Do whatever u want. } 

Dai un’occhiata a questo thread .

Un modo ansible per ottenere ciò sarebbe utilizzare Javascript per esaminare tutti i tag sulla pagina quando carica e verificare se si collegano a un sito esterno. In tal caso, puoi aggiungere un evento onclick per mostrare una casella di conferma / avviso o qualcosa di più elegante. Ovviamente, l’uso di jQuery semplificherebbe notevolmente il Javascript che dovrai scrivere, come nel thread precedente.

Usando l’espressione di questa domanda , puoi fare quanto segue:

 $.expr[':'].external = function(obj){ return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname); }; $.expr[':'].internal = function(obj){ return obj.hostname == location.hostname; }; $(function() { var unloadMessage = function() { return "Don't leave me!"; }; $('a:internal').click(function() { window.onbeforeunload = null; }); $('form').submit(function() { window.onbeforeunload = null; }); $('a:external').click(function() { window.onbeforeunload = unloadMessage; }); window.onbeforeunload = unloadMessage; }); 

È ansible. Prova a inserire una domanda o rispondi a SO e poi a navigare prima di inviarlo. Non importa se fai clic su un link o digiti nella barra degli indirizzi, ottieni “Sei sicuro?” mettere in guardia. Potresti postare su SO Meta chiedendo come lo fanno.

Puoi farlo se progetti il ​​tuo sito come app web di una sola pagina.
Significa che una singola pagina viene caricata, quindi altri contenuti vengono caricati dynamicmente usando ajax.

In tal caso, l’ onbeforeunload viene triggersto quando l’utente lascia la pagina / il sito.