Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Detect Different Browsers and their Versions using JavaScript

In this article I will discuss different JavaScript techniques to detect the browser and their versions. There is basically three major browsers (IE, Chrome, Mozilla Firefox) and I will cover each of them deeply.

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> 
Above figure is output of browser detection for chrome

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

Above figure is output of browser detection for Mozilla Firefox

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.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login