The navigator object

The navigator object was conceived back in the days when Netscape Navigator reined supreme. These days it serves as much as an irony of NS's diminished market share as way of probing browser information.

The navigator object of JavaScript contains the following core properties:

Let's see exactly what these properties reveal of your browser:

AppCodeName: Mozilla
AppName: Microsoft Internet Explorer
AppVersion: 4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Alexa Toolbar)
UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Alexa Toolbar)
Platform: Win32

At a glance

You probably think you have a very solid idea now of how to utilize the navigator object to detect your client's browser type. At its most basic form, the following two properties are used:

navigator.appName
navigator.appVersion

For example:

//detect Netscape 4.7+
if (navigator.appName=="Netscape"&&parseFloat(navigator.appVersion)>=4.7)
alert("You are using Netscape 4.7+")

However, depending on the browser you're trying to detect, you'll find the above two properties too limiting.

Detecting Firefox 1.0+

Take for example, Firefox 1.0+. It shares the same "appName" value as older Netscape browsers, which is "Netscape." The appVersion value returned is also out of wack, which is "5." So we need to look to another property, which turns out to be "UserAgent." For Firefox 1.04 for example, its userAgent property reads:

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4

Ah ha, the text at the end of the string apparently contains the information we want. Based on this new found discovery, the below code detects if you're using Firefox 1.0+:

if(navigator.userAgent.indexOf("Firefox")!=-1){
var versionindex=navigator.userAgent.indexOf("Firefox")+8
if (parseInt(navigator.userAgent.charAt(versionindex))>=1)
alert("You are using Firefox 1.x or above")
}

The code assumes that all Firefox versions contain the string "Firefox/" immediately followed by the version number (ie "1").

Detecting IE 5.5+

Detecting IE using the navigator object also poses a similar problem as Firefox, since its "navigator.appVersion" property contains more than just the version number of IE:

4.0 (compatible; MSIE 5.5; Windows 98; Hotbar 3.0)

If we were to use parseFloat to try and extract out the browser version in "navigator.appVersion", we'd get 4.0, instead of the correct number (5.5). This is due to the way parseFloat works- by returning the first number it encounters. So, how does one go about getting the version number in IE? As with Firefox, it really comes down to how you wish to approach the issue. Lets stick with using the "navigator.appVersion" property this time, though you can certainly use "navigator.userAgent" as well:

//Detect IE5.5+
version=0
if (navigator.appVersion.indexOf("MSIE")!=-1){
temp=navigator.appVersion.split("MSIE")
version=parseFloat(temp[1])
}

if (version>=5.5) //NON IE browser will return 0
alert("You're using IE5.5+")

In the above, string.split() is first used to divvy up navigator.appVersion into two parts, using "MSIE" as the separator:

4.0 (compatible; MSIE 5.5; Windows 98; Hotbar 3.0)

As a result temp[1] contains the part after "MSIE", with the browser version appearing first. Doing a parseFloat() on temp[1] therefore retrieves the browser version of IE.

The Opera pitfall

Using the navigator object to screen for Opera is even a little more complex, as Opera by default identifies itself as IE, with Opera 8 identifying itself as IE6, inside "navigator.userAgent." The rationale for this is so that scripts screening for IE would also allow Opera through, so that Opera will render these pages properly. Lets take a look at what the userAgent of Opera 8.5 returns depending on what it is set to identify as:

As IE6: Mozilla/4.0 (compatible; MSIE 6.0; Windows XP) Opera 8.5 [en]
As Moz5: Mozilla/5.0 (Windows XP; U) Opera 8.5 [en]
As Opera: Opera/8.5 (Windows XP; U) [en]

"What's the problem? Opera 8.5 appears in each case." you may say. Well, look closer, and notice how when Opera is set to identify as itself, the Opera string returned is slightly different ("Opera/8.5" versus "Opera 8.5"). So ironically enough, the expression

if (navigator.userAgent.indexOf("Opera 8.5")!=-1)

will fail if the user has their browser set to identify as Opera, but not if any other browser!

Despite this oddity, the code to detecting Opera need not be any different than the one used to detect Firefox:

if(navigator.userAgent.indexOf("Opera")!=-1){
var versionindex=navigator.userAgent.indexOf("Opera")+6
if (parseInt(navigator.userAgent.charAt(versionindex))>=8)
alert("You are using Opera 8 or 9")
}

This also assumes that all Opera versions contain the string "Opera" immediately followed by either a space or "/", then the version number (ie "8"). And since it only looks at the first number within the version, it can only detect up to Opera 9, not 10 for example.

Conclusion

We've seen how to use navigator to detect the browser type of your visitors. If the potential pitfalls and complexity of usage of it is a little too much for you, an alternative is to use Object Detection. Whichever method you choose, just be sure to choose one!

discuss this topic to forum