Individuare il browser con jQuery è un compito relativamente semplice. Tuttavia va fatta una precisazione: usare un approccio basato sul supporto al DOM o a determinate caratteristiche di JavaScript è qualcosa di non affidabile. Prendiamo ad esempio il supporto al modello di eventi del DOM: oggi le ultime versioni di Internet Explorer supportano sia il modello proprietario sia quello standard del W3C. Cosa significa questo? Significa che un browser può modificare il suo supporto ad ogni nuova release, quindi la nostra procedura basata sul supporto a determinate caratteristiche può fallire o restituire risultati ambigui. Viceversa l'approccio basato sulla stringa dello user-agent da risultati più stabili nel tempo. Ad esempio negli ultimi tre anni nessuno tra i maggiori browser ha modificato in modo significativo tale stringa. Vediamo come utilizzare questo approccio.
La seguente funzione restituisce un oggetto contenente il nome del browser e la sua versione:
var getBrowser = function() {
var userAgent = navigator.userAgent.toLowerCase(),
browser = '',
version = 0;
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
// IE?
if ($.browser.msie) {
userAgent = $.browser.version;
userAgent = userAgent.substring(0, userAgent.indexOf('.'));
version = userAgent;
browser = "Internet Explorer";
}
// Chrome?
if ($.browser.chrome) {
userAgent = userAgent.substring(userAgent.indexOf('chrome/') + 7);
userAgent = userAgent.substring(0, userAgent.indexOf('.'));
version = userAgent;
// Non è Safari!
$.browser.safari = false;
browser = "Chrome";
}
// Safari?
if ($.browser.safari) {
userAgent = userAgent.substring(userAgent.indexOf('safari/') + 7);
userAgent = userAgent.substring(0, userAgent.indexOf('.'));
version = userAgent;
browser = "Safari";
}
// Mozilla?
if ($.browser.mozilla) {
// Firefox?
if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
userAgent = userAgent.substring(userAgent.indexOf('firefox/') + 8);
userAgent = userAgent.substring(0, userAgent.indexOf('.'));
version = userAgent;
browser = "Firefox"
}
// Un altro browser basato su Gecko
else {
browser = "Mozilla (not Firefox)"
}
}
// Opera?
if ($.browser.opera) {
userAgent = userAgent.substring(userAgent.indexOf('version/') + 8);
userAgent = userAgent.substring(0, userAgent.indexOf('.'));
version = userAgent;
browser = "Opera";
}
return {
ua: browser,
ver: version
}
};
Esempio d'uso:
var UA = getBrowser();
$('#output').text(UA.ua + ' ' + UA.ver);
Potete visionare l'esempio finale in questa pagina.