Vai a: [ Contenuti ] [ Categorie ] [ Cerca ]

Elucubrato da saibal

Addì 22 novembre 2001

Controllo browser con javascript

Controllo browser con javascript


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.0 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:

Nascondi linee numerate

ChiudiChiudi tutti

1
2
3
4
5
6
7
8
9
10
11
12
13

<SCRIPT language="JavaScript">
<!--
if (document.layers){ //Netscape 4.x 
document.write("<link rel=&#039;stylesheet&#039; href=&#039;stile_netscape4.css&#039; type=&#039;text/css&#039;>"); 
} 
else if (document.all){ // Explorer 
document.write("<link rel=&#039;stylesheet&#039; href=&#039;stile_explorer.css&#039; type=&#039;text/css&#039;>"); 
}
else if (document.getElementById){ //Netscape 6
document.write("<link rel=&#039;stylesheet&#039; href=&#039;stile_netscape6.css&#039; type=&#039;text/css&#039;>");
}
//-->
</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

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. 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".

Pagina: [1] 2

  • 11.889 visite
  • Voto negativoVoto positivo Vota: 92% Loading ... Loading ...

link sponsorizzati

Consiglialo su Facebook

Post precedente

Post successivo


Lascia un Commento

Iscriviti alle discussione senza commentare

Torna: [ Inizio ] [ Contenuti ] [ Categorie ] [ Cerca ]

Pagina renderizzata in soli 0,204 secondi dopo aver eseguito ben 59 query. Wordpress... prestazioni da urlo!