Booom.it

Tra le varie soluzioni per caricare un foglio di stile in base al browser che stiamo utilizzando vi è anche quella che utilizza Javascript.

Utilizziamo un semplice test già definito qui.

1
opera=(/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent))?1:0;
2
mozilla=(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent))?1:0;
3
ie=(/MSIE (\d+\.\d+);/.test(navigator.userAgent))?1:0;

A questo punto a seconda della variabile che risulta vera possiamo caricare un CSS piuttosto che un altro:

01
if (ie){ 
02
// Nel caso di Internet Explorer
03
document.write("<link rel='stylesheet' href='ie.css' type='text/css' />");
04
}else if (mozilla) {
05
// Nel caso di Mozilla
06
document.write("<link rel='stylesheet' href='mozilla.css' type='text/css' />");
07
}else if (opera) {
08
// Nel caso di Opera
09
document.write("<link rel='stylesheet' href='opera.css' type='text/css' />");
10
}else{
11
// In caso di un altro browser
12
document.write("<link rel='stylesheet' href='generic.css' type='text/css' />");
13
}

Ovviamente i modi sono svariati, si può per esempio agire sugli elementi della pagina, in quanto a seconda del browser esistono metodi e attributi differenti per alcuni oggetti:

01
if(document.layers){
02
// Netscape 4 ed equivalenti
03
document.write("<link rel='stylesheet' href='netscape4.css' type='text/css' />");
04
}
05
if(document.all){
06
// Internet Explorer
07
document.write("<link rel='stylesheet' href='ie.css' type='text/css' />");
08
}
09
if(document.getElementById){ 
10
// Netscape 6 ed equivalenti
11
document.write("<link rel='stylesheet' href='netscape6.css' type='text/css' />");
12
}

Così facendo il test sui precedenti metodi e attributi sappiamo che browser si sta utilizzando.

In questo articolo impariamo a riconoscere il browser dell’utente tramite l’oggetto navigator la cui proprietà userAgent contiente le informazioni che ci servono, riguardanti browser, sistema operativo, ecc.

1
<button onclick="alert(navigator.userAgent);">User Agent</button>

Prova Qui

La stringa che compare è qualcosa di simile “Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.0.13) Gecko/2009080315 Ubuntu/9.04 (jaunty) Firefox/3.0.13″ il che vi da molte informazioni sul browser che sto usando in questo momento.

Quello che ci interessa capire è fondamentalmente se si tratta di un browser basato su Mozilla, su Opera o su Internet Explorer. Per fare ciò ci sono svariati modi, qui useremo un semplice test:

1
opera=(/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent))?1:0;
2
mozilla=(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent))?1:0;
3
ie=(/MSIE (\d+\.\d+);/.test(navigator.userAgent))?1:0;

Ed ecco il test in modo molto compatto:

1
<button onclick='(/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent))?alert("Usi Opera"):(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent))?alert("Usi Mozilla"):(/MSIE (\d+\.\d+);/.test(navigator.userAgent))?alert("Usi internet Explorer"):alert("Non usi ne Opera ne Mozilla ne Internet Explorer, oppure si è verificato un problema :(");'>Prova Qui</button>

In Javascript è possibile catturare l’evento di pressione di un tasto da tastiera con il comando document.onkeydown a cui va associata la funzione da eseguire in caso venga premuto un tasto da tastiera:

1
document.onkeydown = keyDown;

In questo caso viene eseguita la funzione keyDown alla pressione di un tasto, per cui andiamo ora a definire questa funzione:

1
function keyDown(e){
2
 if (!ie) {var keyCode=e.which;}
3
 if (ie) {var keyCode=event.keyCode;}
4
 if(keyCode==39){window.location=URLsuccessivo;}
5
 if(keyCode==37){window.location=URLprecedente;}
6
}

In questo esempio vi è il riconoscimento dei tasti relativi alla freccia destra ed alla freccia sinistra. Quindi questo serve per una navigazione su più pagine in sequenza, con la pressione della freccia destra passo all’url successivo e con la freccia sinistra all’url precedente. Ovviamente vanno dichiarate le due variabili URLsuccessivo e URLprecedente oppure sostituite con i rispettivi URL in stringa.