How to Detect Different Browsers and their Versions using JavaScript

Introduction:

This tutorial will cover the basic theory and technique of browser detection in JavaSript enabled web browsers.

Description:

Although almost each and every script works on all JavaScript enabled web browser. But there are few of things that just don't work on certain browsers i.e. they are browser dependent. Sometimes old web browsers doesn’t support some script.
Sometimes it’s become too important to know the client web browser for delivering some information or content in appropriate way. Basically browser detection allows you to know the clients browser name and version. Here we need to write different functions for different browsers for detection.

Browser Detection:

There are two objects which is used for browser detection A) navigator.appName B) navigator.appVersion .First one detects the web browser and second one describes the browser version.
If the browser is Mozilla firefox , navigator.appName returns the string "Mozilla firefox". If it is Internet Explorer, it returns the string "Microsoft Internet Explorer". Using these objects we can show an alert box with a message what browser client is using.
This navigator object contains all the information about web browser name, version and more. Publically there is no particular method that relates to navigator object but all browsers support it.

Detection Scheme:

The JavaScript that will detect the browser will use navigator object. This object holds these listed variables.

navigator.appCodeName - This variable hold the code name of browser E.g. Mozilla.
navigator.appName -This variable hold the name of the browser -(e.g. Google chrome, Mozilla Firefox, Opera or Microsoft Internet Explorer) .
navigator.appVersion- This variable hold the browser version (e.g. 1.0 or 6.0). .
navigator.userAgent-This variable hold The header information for the browser. (e.g. Mozilla/3.0) .
navigator.platform- This variable hold The users operating system (E.g. Windows ) .

The navigator.userAgent property is more better than appName because, for example, Firefox (and few other browsers) may return the string "Netscape" as the value of navigator.appName for compatibility with Netscape Navigator.

Following Script will cover the all method and properties of browser detection scheme.

Listing 1: Script for detecting browser Name Version /Full version

<html>
<head>
<title>Browser Detection</Title>
<Script Language="JavaScript">
var objappVersion = navigator.appVersion;
var objAgent = navigator.userAgent;
var objbrowserName  = navigator.appName;
var objfullVersion  = ''+parseFloat(navigator.appVersion); 
var objBrMajorVersion = parseInt(navigator.appVersion,10);
var objOffsetName,objOffsetVersion,ix;

// In Chrome 
if ((objOffsetVersion=objAgent.indexOf("Chrome"))!=-1) {
 objbrowserName = "Chrome";
 objfullVersion = objAgent.substring(objOffsetVersion+7);
}
// In Microsoft internet explorer
else if ((objOffsetVersion=objAgent.indexOf("MSIE"))!=-1) {
 objbrowserName = "Microsoft Internet Explorer";
 objfullVersion = objAgent.substring(objOffsetVersion+5);
}

// In Firefox
else if ((objOffsetVersion=objAgent.indexOf("Firefox"))!=-1) {
 objbrowserName = "Firefox";
}
// In Safari 
else if ((objOffsetVersion=objAgent.indexOf("Safari"))!=-1) {
 objbrowserName = "Safari";
 objfullVersion = objAgent.substring(objOffsetVersion+7);
 if ((objOffsetVersion=objAgent.indexOf("Version"))!=-1) 
   objfullVersion = objAgent.substring(objOffsetVersion+8);
}
// For other browser "name/version" is at the end of userAgent 
else if ( (objOffsetName=objAgent.lastIndexOf(' ')+1) < 
          (objOffsetVersion=objAgent.lastIndexOf('/')) ) 
{
 objbrowserName = objAgent.substring(objOffsetName,objOffsetVersion);
 objfullVersion = objAgent.substring(objOffsetVersion+1);
 if (objbrowserName.toLowerCase()==objbrowserName.toUpperCase()) {
  objbrowserName = navigator.appName;
 }
}
// trimming the fullVersion string at semicolon/space if present
if ((ix=objfullVersion.indexOf(";"))!=-1)
   objfullVersion=objfullVersion.substring(0,ix);
if ((ix=objfullVersion.indexOf(" "))!=-1)
   objfullVersion=objfullVersion.substring(0,ix);

objBrMajorVersion = parseInt(''+objfullVersion,10);
if (isNaN(objBrMajorVersion)) {
 objfullVersion  = ''+parseFloat(navigator.appVersion); 
 objBrMajorVersion = parseInt(navigator.appVersion,10);
}
document.write(''
 +'Browser name  = '+objbrowserName+'<br>'
 +'Full version  = '+objfullVersion+'<br>'
 +'Major version = '+objBrMajorVersion+'<br>'
 +'navigator.appName = '+navigator.appName+'<br>'
 +'navigator.userAgent = '+navigator.userAgent+'<br>'
)
</script>
</head>
<body>
</body>
</html>

Figure 1 Above figure is output of browser detection for chrome.

Figure 2 Above figure is output of browser detection for Mozilla Firefox.

Explanation:

Above script uses userAgent to perform the detection. It also uses appName and appVersion for only last resort, if the user agent string has an undefined format. Browser will show above output.
Since different browsers support different objects for that you can use the particular set method for particular browser rather than using collective method.
For example, since only Opera supports the property "window.opera", you can use that to find opera browser property.

Conclusion

This tutorial begins with browser detection theory and later it had explain the browser detection scheme and script for detection. Browser detection is very useful in current environment because the application should support all kind of browsers. So detect the browser and then write the corresponding code.

As usual, Please comment here if you have any questions.

Give your note to this post:	1 2 3 4 5 6 7 8 9 10
Is this post helpful?	Yes No