Coders' Corner Search:
General :: Programming :: JavaScript
Code snippets to add functionality to your HTML pages, preferably cross-browser.

Articles:


Featured Article

Detect the browser type and version, operating system platform

Question:

To make my web site work with all major browsers, I need to detect the browser type and what version it is. Do you have a routine handy?

Answer:

The following function takes the navigate.userAgent property and parses it. Then it fills a structure with properties browser, platform and version. It even returns a major and minor version number.

Use it as shown in the test call at the bottom of the example.

<script language="JavaScript">
 <!--
 function Trim(s) {
   var retVal = "";
   var start = 0;
   while ((start < s.length) && (s.charAt(start) == ' ')) { ++start; }
   var end = s.length;
   while ((end > 0) && (s.charAt(end - 1) == ' ')) { --end; }
   return s.substring(start, end);
 }
 
 function WhatBrowser(ua) {
   // set up defaults
 
   this.browser = "Unknown";
   this.platform = "Unknown";
   this.version = "";
   this.majorver = "";
   this.minorver = "";
 
   uaLen = ua.length;
 
   var preparens = "";
   var parenthesized = "";
 
   i = ua.indexOf("(");
   if (i >= 0) {
     preparens = Trim(ua.substring(0,i));
         parenthesized = ua.substring(i+1, uaLen);
         j = parenthesized.indexOf(")");
         if (j >= 0) {
           parenthesized = parenthesized.substring(0, j);
         }
   }
   else {
     preparens = ua;
   }
 
   var browVer = preparens;
 
   var tokens = parenthesized.split(";");
   var token = "";
   for (var i=0; i < tokens.length; i++) {
     token = Trim(tokens[i]);
     if (token == "compatible") {
     }
     else if (token.indexOf("MSIE") >= 0) {
       browVer = token;
     }
     else if (token.indexOf("Opera") >= 0) {
       browVer = token;
     }
     else if ((token.indexOf("X11") >= 0) || 
             (token.indexOf("SunOS") >= 0) || 
 			(token.indexOf("Linux") >= 0)) {
       this.platform = "Unix";
     }
     else if (token.indexOf("Win") >= 0) {
       this.platform = token;
     }
     else if ((token.indexOf("Mac") >= 0) || (token.indexOf("PPC") >= 0)) {
       this.platform = token;
     }
   }
 
   var msieIndex = browVer.indexOf("MSIE");
   if (msieIndex >= 0) {
     browVer = browVer.substring(msieIndex, browVer.length);
   }
 
   var leftover = "";
   if (browVer.substring(0, "Mozilla".length) == "Mozilla") {
     this.browser = "Netscape";
     leftover = browVer.substring("Mozilla".length+1, browVer.length);
   }
   else if (browVer.substring(0, "Lynx".length) == "Lynx") {
     this.browser = "Lynx";
     leftover = browVer.substring("Lynx".length+1, browVer.length);
   }
   else if (browVer.substring(0, "MSIE".length) == "MSIE") {
     this.browser = "IE";
     leftover = browVer.substring("MSIE".length+1, browVer.length);
   }
   else if (browVer.substring(0, "Microsoft Internet Explorer".length) 
            == "Microsoft Internet Explorer") {
     this.browser = "IE"
     leftover = browVer.substring("Microsoft Internet Explorer".length+1, browVer.length);
   }
   else if (browVer.substring(0, "Opera".length) == "Opera") {
     this.browser = "Opera"
     leftover = browVer.substring("Opera".length+1, browVer.length);
   }
 
   leftover = Trim(leftover);
 
   // Try obtaining version info out of the rest
   i = leftover.indexOf(" ");
   if (i >= 0) {
     this.version = leftover.substring(0, i);
   }
   else
   {
     this.version = leftover;
   }
   j = this.version.indexOf(".");
   if (j >= 0) {
     this.majorver = this.version.substring(0,j);
     this.minorver = this.version.substring(j+1, this.version.length);
   }
   else {
     this.majorver = this.version;
   }
 } // end of function WhatBrowser
 
 
 // test call:
 
 var bd = new WhatBrowser(navigator.userAgent);
 document.write(bd.browser + ' on ' + bd.platform + '<br>Version: ' + bd.version);
 // -->
 
 </script>