La mancanza di uno standard comune tra i vari browser presenti sul mercato ha creato spesso problemi ai webmaster, soprattutto se alle prime armi.
In molti casi ci si trova davanti ad un bivio che, per forza di cose, richiede una scelta radicale od un compromesso: rendere il sito "relativamente" semplice (ma compatibile con i maggiori navigatori) oppure orientarsi verso l'ottimizzazione per il browser più diffuso (in questo caso Explorer)?.
A prescindere dalla scelta di ogni webmaster, dobbiamo comunque sapere che javascript mette a disposizione dei piccoli accorgimenti per tentare di risolvere il problema della compatibilità senza dover realizzare diverse versioni di un unico sito; la maggior parte delle volte, infatti, sono pochi gli elementi di una pagina che creano problemi tecnici o di visualizzazione.
Per capire meglio la situazione facciamo un esempio pratico. In alcuni casi (soprattutto quando abbiamo dei form) potrebbe essere utile poter utilizzare diversi fogli di stile esterni a seconda del browser in uso ... come fare per risolvere la questione? Non abbiamo, infatti, né il tempo né la voglia di creare più versioni speculari delle stesse pagine.
Ecco, quindi, il mio riferimento precedente alle funzionalità offerte da javascript. In questo caso possiamo scrivere ed utilizzare un codice che, in parole povere (e mi perdonino i puristi della programmazione), può essere "tradotto" e letto in questa maniera:
- "Se l'utente usa Netscape 4.x fai questo"
- "Se invece l'utente usa Explorer fai questo"
- "Se invece l'utente usa Netscape 6.x fai questo"
- "Altrimenti, nel caso non fosse utilizzato nessuno di questi browser, fai quest'altro"
Adesso non ci resterà che scegliere le istruzioni da far eseguire allo script; per capire a fondo ciò di cui stiamo parlando riprendiamo l'esempio dei fogli di stile esterni; il nostro scopo è usare 3 diversi fogli di stile a seconda del browser utilizzato.
Dopo aver preparato i vari CSS in base alle nostre esigenze possiamo scrivere, tra i tag <head> della pagina, questo semplice codice:
<script language="JavaScript">
<!--
if (document.layers){ //Netscape 4.x
document.write("<link rel='stylesheet' href='stile_netscape4.css' type='text/css'>");
}
else if (document.all){ // Explorer
document.write("<link rel='stylesheet' href='stile_explorer.css' type='text/css'>");
}
else if (document.getElementById){ //Netscape 6.x
document.write("<link rel='stylesheet' href='stile_netscape6.css' type='text/css'>");
}
//-->
</script>
Lo script può essere "letto" in questa maniera:
- Se è usato Netscape stampa il tag <link rel='stylesheet' href='stile_netscape4.css' type='text/css'> che utilizza i CSS chiamati stile_netscape4;
- Se è usato Explorer stampa il tag che utilizza i CSS chiamati stile_explorer.css;
- Se è usato Netscape 6 stampa il tag che utilizza i CSS chiamati stile_netscape6.css.
Possiamo facilmente dedurre che:
- document.layers è l'elemento che identifica Netscape 4.x
- document.all è l'elemento che identifica Explorer
- document.getElementById è l'elemento che identifica Netscape 6.x
Attenzione però: come forse avrete notato c'è un ordine ben preciso nel riconoscimento dei browser; abbiamo utilizzato prima "document.layers", poi "document.all" ed infine "document.getElementById". La spiegazione per questo ordine prestabilito sta nel fatto che document.getElementById è identificativo anche di Explorer oltre che di Netscape 6.x. Quindi, se mettessimo "getElementById" prima di "document.all", Explorer eseguirebbe l'istruzione all'interno del primo blocco di codice e non nel secondo.
Per lo stesso motivo dobbiami utilizzare il costrutto "else if" e non "if"; con l'utilizzo della sintassi "else if" escludiamo la possibilità che Explorer esegua sia le istruzioni dettate da "document.all" che da "document.getElementById".
Penso che questi due esempi possano chiarire ogni eventuale dubbio su Explorer:
Modalità corretta
<script language="JavaScript">
<!-- Da inserire in un punto qualsiasi del body
if (document.layers){ //Netscape 4.x
document.write("Io sono Netscape 4.x");
}
else if (document.all){ // Explorer
document.write("Io sono Explorer");
}
else if (document.getElementById){ //Netscape 6.x
document.write("Io sono Netscape 6.x");
//-->
</script>
Su Internet Explorer avremo stampata questa riga: Io sono Explorer
Modalità errata
<script language="JavaScript">
<!-- Da inserire in un punto qualsiasi del body
if (document.layers){ //Netscape 4.x
document.write("Io sono Netscape 4.x");
}
if (document.all){ // Explorer
document.write("Io sono Explorer");
}
if (document.getElementById){ //Netscape 6.x
document.write("Io sono Netscape 6.x");
}
//-->
</script>
Su Internet Explorer avremo stampata questa riga: Io sono ExplorerIo sono Netscape 6
Come vedete sono infiniti gli utilizzi per questo semplice script: potremmo usare diversi CSS oppure scrivere un diverso <body> oppure ancora usare un IFRAME per chi ha Explorer e stampare un link testuale per chi naviga con Netscape.
Ecco un semplice esempio da utilizzare nel corpo della pagina:
<iframe src="pagina.htm" width="320" height="290"></iframe>
<script language="JavaScript">
<!--
if(document.layers){
document.write("Stai utilizzando Netscape. Clicca <a href="pagina.htm">qui</a> per aprire la
pagina da visualizzare");
}
//-->
</script>
Sappiamo, per esperienza, che gli IFRAME non vengono "letti" da Netscape 4.x e quindi, con il javascript analizzato, verrà visualizzato solo il link testuale; viceversa, con Explorer e NN6, vedremo correttamente solo l'IFRAME.
Prima di concludere non possiamo dimenticare un browser che sta riscuotendo sempre più consensi: Opera.
Normalmente questo navigatore viene interpretato come se fosse Explorer; potrebbe accadere, però, che si renda necessario "separarlo" da IE ed intercettarlo in modo univoco.
Per fare questo basterà aggiungere una variabile ed un costrutto "else if" allo script analizzato in precedenza:
<script language="JavaScript">
<!--
var OPER=navigator.userAgent.indexOf("Opera");
if (document.layers){ //Netscape 4.x
document.write("Io sono Netscape 4.x");
}
else if((OPER>-1)) {
document.write("Io sono Opera");
}
else if (document.all){ // Explorer
document.write("Io sono Explorer");
}
else if (document.getElementById){ //Netscape 6
document.write("Io sono Netscape 6");
}
//-->
</script>
Anche in questo caso, per evitare che Opera venga intercettato come se fosse Explorer, è necessario utilizzare le istruzioni "else if" e rispettare l'ordine dei costrutti.
