Lo script che presentiamo permette di avere una barra di attesa che, dopo un determinato lasso di tempo, reindirizzerà ad una pagina predefinita.
La barra indicherà lo stato del carimento in modo dinamico e potrà essere utile in quei casi in cui si voglia far vedere un documento per un tempo prestabilito oppure nel caso si utilizzi un quiz con scadenza etc etc.
Lo script è perfettamente compatibile con Netscape 4.x e con Explorer mentre con Netscape 6.x verrà utilizzato il meta tag <META http-equiv="REFRESH" CONTENT="SECONDI;URL=URL"> per reindirizzare alla nuova pagina senza, però, mostrare nessuna barra.
L'esempio si compone di 2 file:
- esempio.htm
- redirect.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Per prima cosa inseriamo questi fogli di stile tra gli <head> della pagina:
I parametri da poter modificare sono solo due
è il colore della barra che avanza
è il colore di sfondo della barra.
Il codice javascript va inserito sempre tra i tag <head> della pagina
Tutte le personalizzazioni da effettuare si trovano nella prima parte del javascript.
il tempo (in secondi) prima di essere reindirizzati
è il messaggio che comparirà sopra la barra di caricamento. il testo può essere omesso semplicemente non scrivendo nulla ma lasciando due virgolette in questa maniera: var message = "";
la grandezza del testo del messaggio di reindirizzamento
il tipo di font del messaggio di reindirizzamento
la pagina a cui dovrà puntare il reindirizzamento (parametro valido solo per Netscape 6.x)
lunghezza (in pixel) della barra
altezza (in pixel) della barra
la pagina a cui dovrà puntare il reindirizzamento (parametro valido per Explorer e Netscape 4.x)
A questo punto dobbiamo inserire, nel <body> della pagina, il codice per visualizzare la barra
Questo codice appena visto (che si differenzia a seconda del browser in uso) non richiede personalizzazione e può essere lasciato così.
Altre modifiche non sono necessarie.
