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:
<style>
<!--
#bar, #barbackground{
position:absolute;
left:0;
top:0;
background-color:blue;
}
#barbackground{
background-color:black;
}
-->
</style>
I parametri da poter modificare sono solo due
background-color:blue;
è il colore della barra che avanza
background-color:black;
è il colore di sfondo della barra.
Il codice javascript va inserito sempre tra i tag <head> della pagina
<script language="JavaScript1.2">
var duration=5;
var message = "Verrai reindirizzato tra " + duration + " secondi";
var font_size = 3;
var font_face = "verdana";
var NS6redirection = "redirect.htm";
var bar_width = 200;
var bar_height = 15;
var centered = (screen.width) ? (screen.width-bar_width)/2 : 0;
function postaction(){
window.location="redirect.htm"
}
var clipright=0
var widthIE=0
var widthNS=0
function initializebar(){
if (document.all){
baranchor.style.visibility="visible"
widthIE=bar.style.pixelwidth
startIE=setInterval("increaseIE()",50)
}
if (document.layers){
widthNS=document.baranchorNS.document.barbackgroundNS.clip.width
document.baranchorNS.document.barNS.clip.right=0
document.baranchorNS.visibility="show"
startNS=setInterval("increaseNS()",50)
}
}
function increaseIE(){
bar.style.clip="rect(0 "+clipright+" auto 0)"
window.status="Attendere..."
if (clipright<widthIE)
clipright=clipright+(widthIE/(duration*20))
else{
window.status=''
clearInterval(startIE)
postaction()
}
}
function increaseNS(){
if (clipright<202){
window.status="Attendere..."
document.baranchorNS.document.barNS.clip.right=clipright
clipright=clipright+(widthNS/(duration*20))
}
else{
window.status=''
clearInterval(startNS)
postaction()
}
}
window.onload=initializebar
</script>
Tutte le personalizzazioni da effettuare si trovano nella prima parte del javascript.
var duration=5;
il tempo (in secondi) prima di essere reindirizzati
var message = "Verrai reindirizzato tra " + duration + " secondi";
è 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 = "";
var font_size = 3;
la grandezza del testo del messaggio di reindirizzamento
var font_face = "verdana";
il tipo di font del messaggio di reindirizzamento
var NS6redirection = "redirect.htm";
la pagina a cui dovrà puntare il reindirizzamento (parametro valido solo per Netscape 6.x)
var bar_width = 200;
lunghezza (in pixel) della barra
var bar_height = 15;
altezza (in pixel) della barra
window.location="redirect.htm"
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
<script language="JavaScript1.2">
if(document.layers){
document.write('<font size='+font_size+' face="'+font_face+'">' +message+
'</font><br />');
document.write('<ilayer name="baranchorNS" visibility="hide"
width='+bar_width+' height='+bar_height+'>')
document.write('<layer name="barbackgroundNS" bgcolor=black
width='+bar_width+' height='+bar_height+' z-index=10 left='+centered+' top=0></layer>')
document.write('<layer name="barNS" bgcolor=blue width='+bar_width+'
height='+bar_height+' z-index=11 left='+centered+' top=0></layer>')
document.write('</ilayer>')
}
else if (document.all){
document.write('<font size='+font_size+' face="'+font_face+'">' +message+
'</font>');
document.write('<div id="baranchor"
style="position:relative;width:'+bar_width+'px;height:'+bar_height+'px;visibility:hidden;">')
document.write('<div id="barbackground"
style="width:'+bar_width+'px;height:'+bar_height+'px;z-index:9"></div>')
document.write('<div id="bar"
style="width:'+bar_width+'px;height:'+bar_height+'px;z-index:10"></div>')
document.write('</div>')
}
else if (document.getElementById){
document.write('<font size='+font_size+' face="'+font_face+'">' +message+
'</font>');
document.write('<META http-equiv="REFRESH"
CONTENT="'+duration+';URL='+NS6redirection+'">')
}
</script>
-----------------------------
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.
