Come eseguire uno script all’uscita della pagina

messaggio sull'evento onbeforeunload

Quante volte abbiamo visto questo messaggio mentre cercavamo di uscire da una pagina? Non so voi, ma io molte 🙂

In questo articolo parleremo di come aggiungere e personalizzare questo messaggio, rendendolo il meno intrusivo possibile.

Innanzi tutto, a cosa serve?

A prima vista sembra una cosa inutile utilizzata solamente per recare fastidio (infatti molti spamsite ne fanno uso), per cercare di far eseguire per forza una qualche azione. Ho sempre odiato i siti che ne abusano! Tanto più che te lo propongono in ogni pagina!!!

In realtà questa funzionalità può tornare utile quando abbiamo dei moduli e non vogliamo che i dati immessi dall’utente vadano persi per errore per aver dimenticato di cliccare su un “salva” o chiudendo il browser sbadatamente.

Vediamo quindi come implementare le due diverse situazioni.

Messaggio fastidioso reso il più possibile poco fastidioso 🙂

Vediamo come effettuare un classico messaggio alla chiusura di una pagina. Iniziamo parlando dell’evento incriminato: window.onbeforeunload. Questo evento, come si deduce dal nome, esegue una funzione data nel momento in cui si cerca di lasciare la pagina.

window.onbeforeunload = () => {
    return `Arrivederci e buon viaggio! Torna a trovarci!`;
}

Se inseriamo nel nostro file javascript (oppure tra i tag <script> e </script> le righe qui sopra, all’uscita della pagina verremmo salutati con un bel Ciao! Bello no?

No! Non fatelo assolutamente così! Ve lo proibisco!

Perché? Perché questo ciao ci tormente ogni volta che cerchiamo di uscire dalla pagina! Diventerà un incubo per chiunque!

La cosa migliore da fare è proporlo agli utenti solamente una volta. Questo si può fare con gli storage.

window.onbeforeunload = () => {
    if (!sessionStorage.getItem('messaggioFastidioso')) {
        sessionStorage.setItem('messaggioFastidioso', 1);
        return 'Arrivederci e buon viaggio! Torna a trovarci!';
    }
};

In questo esempio se il cookie messaggioFastidioso non esiste lo creiamo e visualizziamo il messaggio, in caso contrario non facciamo nulla. In pratica il messaggio viene visualizzato solo ogni 24 ore.

Nulla di complicato, vero? Possiamo combinare varie cose fino a ottenere questa simpatica funzioncina di mia invenzione:

//  Mostra un messaggio all'uscita di una pagina

//  @author  Chalda Pnuzig
//  @license https://opensource.org/licenses/gpl-license.php GNU Public License
//  @link    blog.chalda.it
//  @version 1.0.20091217

// Inizializzo il timer
const startTimer = new Date().valueOf();

// Aggiungo una funzione prima che la pagina venga chiusa
window.onbeforeunload = () => {
    // Recupero il tempo trascorso
    const timer = parseInt(new Date().valueOf() - startTimer) / 1000;

    // Controllo di non aver ancora mostrato il messaggio
    const check = sessionStorage.getItem('richiestaCommenti');
    if ((!check || check > startTimer) && (timer > 60)) {
        // Per le prossime 24 ore non mostro più il messaggio
        sessionStorage.setItem('richiestaCommenti', new Date(new Date().setTime(new Date().getTime() + 24 * 3_600_000)));

        // Il messaggio da visualizzare
        return 'Stai leggendo questa pagina da più di un minuto! ' + '\n'
            + 'Probabilmente l\'hai ritenuta interessante!' + '\n'
            + 'Che ne dici di farmelo sapere con un commento?';
    }
}

Come si può capire leggendo i commenti questa funzione mostra il messaggio solamente ogni 24 ore e solamente a chi rimane sulla pagina per più di 60 secondi, in modo da non importunare coloro i quali giungono per sbaglio sul nostro sito (ricordo che il 90% non resta su di una pagina per più di 10 secondi, il restante 10% sono coloro che hanno trovato quello che cercavano 😛 )

Questa funzione è implementata in questo post, quindi, se siete arrivati a leggere fin qui, quando lascerete la pagina vi costringerò a lasciare un messaggio 😀

Controllare se un form è stato compilato ma non spedito

Questa è una cosa tantino più utile 🙂

// Mostra un messaggio se un form è stato compilato ma non spedito

// @author  Chalda Pnuzig
// @license https://opensource.org/licenses/gpl-license.php GNU Public License
// @link    blog.chalda.it
// @version 1.0.20091217

let formModificato = false;

// Cambio lo stato della variabile se si accede ad un elemento del form
document.querySelectorAll('form').forEach(form => {
    form.querySelectorAll('input,select,textarea').forEach(input => {
        input.addEventListener('focus', () => formModificato = true);
    });
    form.addEventListener('submit', () => {
        formModificato = false;
    });
});

window.onbeforeunload = () => {
    if (formModificato) {
        formModificato = false;
        return 'ATTENZIONE!' + '\n' +
            'Non hai ancora salvato quello che stavi facendo!';
    }
}

Mi sembra che anche questo codice non abbia bisogno di molte spiegazioni. In pratica applica una funzione sul focus ad ogni elemento di un form la quale fa cambiare lo stato alla variabile formModificato. Alla chiusura della pagina se tale variabile è true viene visualizzato il messaggio.

Cosa ve ne pare di queste due soluzioni? Vi sembrano utili oppure sono soltanto delle seccature?