JAVASCRIPT UTOPIA  back to
BROWSER DETECTION BASICS  

 

the button below invokes a javascript which examines your browser's name, version, and platform.

the script called by the button retrieves the browser information from the javascript navigator object. here's how:

getting the browser name
the browser's name is stored as a property of navigator called appName. we can request that name as navigator.appName, or assign it to a variable easily with:

      var yourBrowserName = navigator.appName;

getting the browser version
the browser's version is also stored as a property of navigator called appVersion. however, appVersion is not as convenient to use as appName. appVersion stores more than just the version number; it also stores information about the platform, the language, the distribution, etc. therefore, to extract the version number from appVersion, we must use one of two built-in javascript functions: parseInt and parseFloat. the former returns the version number as an integer (eg. 3), and the latter returns the full version number, including the floating point (eg. 3.01). we most commonly need to assign version numbers to variables like this:

      var browserVersionMajor = parseInt(navigator.appVersion);
      var browserVersionFull = parseFloat(navigator.appVersion);

special note for IE5
ie5 reports its appVersion as 4.0-compatible, not "5" so if you're looking for ie5 specifically, you can't find it using the above means. you have to do an explicit check for an occurence of the text "MSIE 5.0" in the appVersion string. not sure what drugs microsoft is smoking...

getting the browser platform
in javascript 1.1 and older, the name of the browser's platform is, unfortunately, stored in appVersion, jumbled with the version information. hence, before javascript 1.2, the platform is not immediately accessible because appVersion has a changing length and grammatical construction. in order to pull the platform name out of appversion, we have to compare the value of appVersion against a list of manually specified platform names. for instance, to check if the browser is running on windows 3.1 or macintosh, we compare appVersion to "3.1" and "Mac"--knowing that those strings would be part of the appVersion string on the respective platforms. once we decide which platforms we want to detect, we check for the appropriate strings using javascript's indexOf method. the indexOf method searches navigator.appVersion for the first occurence of our platform name. if indexOf finds a match, it returns the character index of the match (a positive integer). if no match is found, indexOf returns -1 . in practise, then, determining the browser's platform before javascript 1.2 is not just a matter of asking the browser "what platform are you running on?". it's more like asking, "are you running on Windows 3.1? are you running on macintosh? are you running on windows nt?" and listening for a "yes" answer. in code, we ask those questions like this:

     navigator.appVersion.indexOf("WinNT");

in javascript 1.2 and later (4.0+ browsers) we may use the much more convenient navigator.platform property, exactly like we used navigator.appName.

how about a demo?
here's some simple code that demonstrates the topics discussed in this article.

here's another example that shows a quick way to assign a detection variable when you need to handle a specific browser:

var netscape3up = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion)>= 3 ))

if(netscape3up)	{
	alert("you're using netscape 3 or higher.");
}
the variable netscape_3up is assigned the value of true if the conditions after the "=" both evaluate to true (ie. if the appName is "Netscape" and the appVersion is equal to or greater than 3). but if one or both of the conditions evaluate to false, the variable netscape_3up is assigned the value false. for the remainder of our script we can perform netscape 3 specific tasks by simply evaluating the netscape_3up variable, as in if (netscape_3up).

beside being efficient, this method of writing detection code makes executing browser specific behaviour very human-readable.
revision history
spring 1998: posted
april 17, 1999: added the netscape_3up bit
may 10, 1999: added the warning about ie5 reporting itself as 4.0.
october 19, 2000: revised code to include windows 2000. cleaned up code. rewrote sections of the article. added easier cutnpaste textarea for demo code.
october 20, 2000: version 1.1.1. fixed a minor bug.