A web server can detect a lot of client properties when it receives an HTTP request. But in the case of client side scripting, we have to rely on the functions / objects provided with JavaScript. In this rather short article, we will try to comprehend the ways of detecting client browser’s name and version. You must have some basic knowledge about objects, properties and methods to go any further.

Navigator Object

JavaScript was developed by Netscape. The scripting language has several built-in objects to represent window, document, links, etc. Today we will discuss the JavaScript object that represents the client browser. And what could be a name better than navigator.

Browser Detection

One of the properties of the navigator object is appName; beaware of the case sensitiveness of JavaScript. This property is actually a string that represents client browser’s name. Another useful property is appVersion. This is also a string that represents client browser’s version. Let’s see an example that uses these two properties.

Example #1


document.write ("Version: " + version + "
"); } // --> </head> <body onLoad="displayInfo()"> </body> </html>
This code defines two variables browser and version, and intializes them with navigator.appName and navigator.appVersion, respectively. Next, the information is displayed on the screen using document.write(). The result of this code will be something like this: Browser Name: Microsoft Internet Explorer Version: 4.0 (compatible; MSIE 5.0; Windows 98; DigExt)

Version Detection

The next step is to utilize the knowledge, that we gained today, into practical use. Suppose, you have implemented some JavaScript code or HTML tags that are supported only by the latest browsers; or suppose, you have made separated pages for visitors having Netscape Navigator and Internet Explorer. Then you need to detect whether the visitor’s browser supports this functionality. You can use the techniques explained in the following example:

Example #2

<title>navigator object</title>

// does the browser name 
 contain "Navigator"?
if (browser.indexOf ("Navigator") != -1)
document.write ("You have Netscape browser.");
// does the browser name contain "Explorer"?
else if (browser.indexOf ("Explorer") != -1)
document.write ("You have Internet Explorer.");
document.write ("You have unknown browser.");

// find the position of '(' in version
paranStart = version.indexOf ("(");
version = version.substring (0, paranStart-1);
document.write ("
Version: " + version); } //--> </head> <body onLoad="detectVersion()"> </body> </html>
I know the code is somewhat complex. I think that the thing that may be troubling you is the use of indexOf method of “version” and “browser“. We can search for a substring in a string using indexOf method. The result is -1 if the substring is not found; the position of the substring otherwise. Next, the substring (i, j) method of a string returns a substring starting from i upto j. We use this method to cut down the extra information in the version string. First, we detect the staring position of the paranthesis. Next a substring is generated from version, starting from 0 and continuing upto the position of this paranthesis.