Detecting the Browser Type


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 Browsers

Browser

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:

  • http://www.webreference.com/tools/browser/javascript.html

  • http://gemal.dk/browserspy/basic.html





JavaScript Phrasebook(c) Essential Code and Commands
JavaScript Phrasebook
ISBN: 0672328801
EAN: 2147483647
Year: 2006
Pages: 178

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net