window.alert(navigator.appName); | Although browsers' implementations of JavaScript are quite compatible with each other nowadays (especially when compared with the situation during the browser war at the end of the 1990s), detecting the browser type is a vital part of the JavaScript developer's toolbox. The navigator JavaScript object provides browser information. Most useful, but also sometimes challenging to parse, is its userAgent property, which contains the complete browser identification string that is also sent in the HTTP User-Agent header with each request. To just determine the browser type, the appName property suffices, as the preceding code shows. Table 2.1 contains the appName values for the most relevant browsers. Table 2.1. The appName Values for Various BrowsersBrowser | appName |
---|
Internet Explorer | Microsoft Internet Explorer | Mozilla Browsers | Netscape | Konqueror (KDE) | Konqueror | Apple Safari | Netscape | Opera Browser | Opera |
So as you can see, the Safari browser returns the incorrect name. To mitigate this effect, you can search navigator.userAgent for certain browser types. Since the Opera browser can identify itself as another browser (but then still mentions "Opera" in navigator.userAgent), this browser has to be checked first. Determining the Browser Type (browser.html) <script language="JavaScript" type="text/javascript"> var uA = navigator.userAgent; var browserType = "unknown"; if (uA.indexOf("Opera") > -1) { browserType = "Opera"; } else if (uA.indexOf("Safari") > -1) { browserType = "Safari"; } else if (uA.indexOf("Konqueror") > -1) { browserType = "Konqueror"; } else if (uA.indexOf("Gecko") > -1) { browserType = "Mozilla"; } else if (uA.indexOf("MSIE") > -1) { browserType = "Internet Explorer"; } window.alert(browserType); </script> | With a little bit of effort, this script can be extended to distinguish the Mozilla derivatives (Firefox, Epiphany, Galeon, Camino, SeaMonkey, and so on) as well. Detecting the Browser Version Number To determine the browser's version number, several approaches exist. Most of the time, you have a look at navigator.userAgent, which can look like the following: Mozilla/5.0 (Windows; U; Windows NT 5.1; en; rv:1.8.0.3) Gecko/20060426 Firefox 1.5.0.3 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030619 Netscape/7.1 (ax) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.0.3705; .NET CLR 1.1.4322; .NET CLR 2.0.50727) Mozilla/5.0 (compatible; Konqueror/3.4; FreeBSD) KHTML/3.4.2 (like Gecko) Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en) AppleWebKit/418 (KHTML, like Gecko) Safari/417.9.3 Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/312.8 (KHTML, like Gecko) Safari/312.6 Opera/9.00 (Windows NT 5.1; U; en) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.00 So as you can see, depending on the browser type, the version number is buried somewhere else within the value of navigator.userAgent. Therefore, it is a tedious task to cover all possible browsers and to keep on track with new methods. However, there are some web resources that implement a quite decent browser detection. You will find more documentation and code on these websites: |
|