Riconoscere il browser utilizzato con jQuery

Realizzare applicazioni web supportate da tutti i browser è una delle difficoltà fondamentali che si incontrano e a cui spesso bisogna dedicare molto tempo. Purtroppo il problema del supporto non è limitato ai soli fogli di stile ma anche al linguaggio Javascript.

La diversa interpretazione o supporto ai vari metodi e proprietà del Javascript non variano solo in base al browser ma, spesso anche alle singole versioni del browser. Per facilitare la vita agli sviluppatori, fortunatamente molti framework (jQuery su tutti) forniscono la maggior parte delle loro funzionalità già in maniera cross-browser; vale a dire che il singolo metodo agirà in base alla tipologia di browser garantendone il funzionamento senza costringere lo sviluppatore a diversificare il suo codice.

Ci sono dei casi però in cui si ha la necessità di compiere determinate operazioni in base alla tipologia di browser e/0 la versione di esso utilizzata.  Con il solo Javascript, per recuperare queste informazioni possiamo utilizzare un codice simile al seguente:

var browser = navigator.appName,
    browser_version = navigator.appVersion;

Le due variabili contengono le informazioni di cui abbiamo bisogna ma, le stringhe restituite necessitano di essere “trattate” per verificare il browser. Per esempio le due variabili, con Chrome avranno i seguenti valori:

var browser = "Netscape",
    browser_version = "5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.16 Safari/534.13";

Ovviamente la soluzione più semplice è quella di verificare all’interno della stringa il nome e/o la versione del browser di cui abbiamo bisogno e regolarci di conseguenza.

Con jQuery, invece, la soluzione è molto più semplice e non richiede alcuna elaborazione particolare. La proprietà $.browser contiene tutte le informazioni di cui abbiamo bisogno. I browser riconosciuti dal metodo sono:

• mozilla
• msie
• safari
• opera

Il codice seguente è un banalissimo esempio di codice diversificato in base al browser utilizzato:

if($.browser.mozilla)
  $('#browser').html('Stai utilizzando Firefox');
else if($.browser.safari)
  $('#browser').html('Stai utilizzando Safari o Chrome');
else if($.browser.opera)
  $('#browser').html('Stai utilizzando Opera');
else if($.browser.msie)
  $('#browser').html('Stai utilizzando Internet Explorer');​

Come possiamo vedere, non abbiamo bisogno di fare altro per determinare il browser. Quando invece si ha il bisogno di conoscere anche la versione, possiamo utilizzare qualcosa di questo genere:

if($.browser.mozilla & $.browser.version.substr(0,3)=="1.9")
  $('#browser').html('Stai utilizzando Firefox, versione 3');

Ovviamente la versione utilizata nel codice precedente (1.9) si riferisce alla versione del motore di rendering (Gecko per mozilla, Webkit per Safari, ecc.)

Possiamo vedere un piccolo frammento di codice contententi le informazioni del nostro browser preso dalla documentazione ufficiale di jQuery al seguente link:

Demo