Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Controlli su cambio e chiusura di pagina

Gestire gli eventi Javascript quando la pagina viene chiusa o lasciata
Gestire gli eventi Javascript quando la pagina viene chiusa o lasciata
Link copiato negli appunti

Nello sviluppo di siti interattivi spesso si avverte l'esigenza di rilevare tempestivamente la chiusura del browser da parte dell'utente in modo da poter provvedere, per esempio, a cancellare sul server i files temporanei, azzerare il contenuto di un carrello, cancellare le variabili di sessione, o quant'altro.

Come ben sappiamo l'utilizzo dell'evento onUnload non consente di discriminare se il cambio della pagina corrente sia avvenuto per un normale navigazione all'interno del sito, per l'aggiornamento della pagina corrente (pulsante aggiorna o tasto F5), o perchÈ l'utente ha digitato un'altro URL nella barra degli indirizzi.

Vediamo come ovviare all'inconveniente.

Lo script, nella sua forma piu' semplice, riconosce la chiusura del browser e consente di lanciare una finestra di saluti o una procedura di logout sul server.

Per prima cosa vediamo cosa occorre inserire nella pagina da monitorare:

<body onUnload="window.open('chkclose.htm','chk');">

mentre invece nella pagina chkclose.htm inseriremo lo script:

<script type="text/javascript">
 <!--  // (c) br1 - 2002
  if (opener.closed) {
   location.href="logout.asp";
  } else {
   top.close();
  }
 //-->
</script>

Andiamo ad analizzare la sintassi che abbiamo utilizzato ed il motivo.

L'evento onUnload aprira' la pagina chkclose.htm in una popup e lo script provvedera' a verificare se la finestra "padre", cioÈ opener, È ancora aperta (in effetti controlla se È stata chiusa perchÈ il JavaScript mette a disposizione questa proprieta').

Se la finestra padre È stata chiusa si richiama la pagina logout.asp che sul server eseguira' tutte le operazioni necessarie per la chiusura della sessione. Si consiglia di far restituire anche uno script che chiuda la popup, un semplice window.close(). Ecco un esempio:

<% @ Language=VBScript %>
<% Option Explicit %>
<% Session.Abandon %>
<script>
window.close();
</script>

Se invece la finestra padre esiste ancorala popup si chiudera' automaticamente perchÈ non È richiesta nessuna azione da parte del server.

I difetti: lo script nella pagina padre verra' eseguito anche ad ogni cambiamento della pagina, la popup che genera È visibile, lo scriptr nella popup non È in grado di rilevare l'abbandono del sito dovuto alla digitazione di un nuovo URL nella barra degli indirizzi e non rileva il cambio di pathname (le applicazioni spesso sono ospitate interamente in una sottocartella del sito).

Al primo difetto si potrebbe ovviare utilizzando un frameset:

<frameset rows="0,*" onUnload="window.open('chkclose.htm','chk');" frameborder="no">
 <frame name="nascosto" src="about:blank">
 <frame name="visibile" src="pagina.htm">
</frameset>

In questo modo il controllo sara' effettuato solo a seguito della chiusura della finestra, dell'aggiornamento pagina e al cambio di sito. Per il secondo difetto potremo spostare la finestra oltre l'area visibile dello schermo con una piccola modifica qui:

... onUnload="window.open('chkclose.htm','chk','top=2000');this.focus();" ...

Mentre per il terzo occorre complicare un pochino la procedura e passare alla pagina seguente :-)

Vediamo quindi come modificare le pagine da monitorare:

<script type="text/javascript">
 <!--
  function openchk() {
   cartella = location.pathname;
   opzioni = 'width=100,height=100,top=0';
   window.open('chkout.htm?'+cartella,'ctrout',opzioni);
  }
 //-->
</script>
<body onUnload="openchk();">

mentre invece nella pagina chkout.htm inseriremo il nuovo script:

<script type="text/javascript">
 <!--  // (c) br1 - 2002
  prossima = "logout.asp";
  cartella = location.search.substr(1);
  messaggi = true;
  if (opener.closed) {
   if (messaggi) alert("il browser è stato chiuso")
   c_logout();
  } else {
   opener.focus();
   from = opener.location;
   if (typeof(from.href)=="unknown") {
    if (messaggi) alert("Stai lasciando questo dominio!")
    c_logout();
   } else if (cartella!=""&&from.href.indexOf(cartella)>0) {
    if (messaggi) alert("Stai lasciando questa cartella")
    c_logout();
   } else {
    top.close();
   }
  }
  // ----------------------------
  function c_logout() {
   if (prossima!="") {
    location.href=prossima;
   } else {
    top.close();
   }
  }
 //-->
</script>

Nella pagina da monitorare abbiamo preferito far ricorso ad una function per migliorare la leggibilità dello script, ed abbiamo in pratica introdotto una sola variante: la creazione e il passaggio allo pagina popup di un parametro (cartella = location.pathname;) con il path della pagina da monitorare, che servirà allo script per verificare se la pagina richiamata si trova in un percorso diverso.

Anche le opzioni per l'apertura della popup sono state inserite in una variabile per una più agevole personalizzazione.

Vediamo invece cosa si ottiene con l'utilizzo del nuovo script nella popup.

Impostiamo una variabile (prossima) con il nome della pagina che sul server eseguirà tutte le operazioni necessarie per la chiusura della sessione. Lasciandolo vuoto non verrà richiamata nessuna pagina.

Preleviamo dall'url il parametro con il percorso della pagina "padre" (cartella).

Impostiamo una variabile (messaggi) che indicherà al resto dello script se deve visualizzare i messaggi.

Con la prima if verifichiamo se il browser è stato chiuso ed in caso positivo visualizziamo l'eventuale messaggio e richiamiamo l'eventuale pagina di logout (operazioni svolte dalla function c_logout() che non commentiamo)

Se il browser non è stato chiuso gli ridiamo il focus (per minimizzare la presenza della popup) e creiamo una variabile con il riferimento all'oggetto opener.location.

Con il sucessivo controllo verifichiamo se si è cambiato dominio: poichÈ per motivi di riservatezza e protezione non è possibile accedere alla href di una pagina appartenente ad un dominio diverso (la lettura della proprietà opener.location.href genererebbe un errore di "accesso negato") utilizziamo la funzione typeof che in questo caso ci restituisce "unknown".

Se invece è possibile accedere alla proprietà opener.location.href verifichiamo se in questa è contenuta la stringa con il percorso della pagina padre (condizione che si verifica anche quando la nuova pagina è in una sottocartella di quella della pagina padre) ed in caso contrario presumiamo che si stia abbandonando l'applicazione e richiamiamo c_logout(), altrimenti ci limitiamo a chiudere la popup poichÈ non è richiesta nessuna azione.

Ovviamente lo script è personalizzabile potendo modificare i messaggio o decidere, ad esempio, di richiamare una pagina diversa nei casi di chiusura browser, cambio dominio, cambio percorso nel sito...

Buona programmazione :-)

Ti consigliamo anche