Detecting Browser Types and Versions

/** This determines whether a browser with its version is compatible with the use of jCanvas, as
* used currently in main.html.  If it is, the CS-CUBED logo is rendered from the canvas tag with a
* special mouse roll-over effect, otherwise the default CSS roll-over effect is used.  This test is
* required, as otherwise an incompatible browser and version will show nothing.
*
* The numbers in versionMin[] and versionMax[] have to correspond to the order given by
* browserStrn[] and browserCode[] in getBrowser(), which this calls.  A value of 0 in versionMin[i]
* for index i, means this particular browser is not considered and false is returned, otherwise the
* browser version is tested, and if it lies between the values in versionMin[i] and versionMax[i]
* inclusive, true is returned.  If the browser is not recognized, false is returned.  This also
* needs the index as returned by getBrowser.i */
function jCanBrowComp() {
  var versionMin  = [0, 40, 0, 0, 5.1];       // Minimum allowed version numbers.
  var versionMax  = [0, 99, 0, 0, 99,];       // Maximum allowed version numbers.
  var browserCode = getBrowser();             // Get the browser's code.
  if (browserCode === "UN") return false;     // Check if the browser is known.
  var i = getBrowser.i;
  if (versionMin[i] == 0) return false;       // See if the version numbers will be obtained.
  var version = getVersion(browserCode);      // Get version number.
  if (isNaN(version)) return false;           // Early version with ".x" is disregarded.
  version = Number(version);
  if (version == 0) return false;             // The version number has to be > 0.
  if (version >= versionMin[i] && version <= versionMax[i]) return true; // Version number in range.
  return false;                               // If all else fails return with false.
}

/** This is called from an HTML page to print the browser used and its version, if available.  It
invokes getBrowser() and getVersion(), and returns the text to an HTML tag with an id with the
name "browser". */
function getBrowserAndVersion() {
  var begMessage = "You are using ";
  var browserName,versionName;
  var browserCode = getBrowser();
  if (browserCode === "UN") return begMessage + "an unknown browser";
  var version = getVersion(browserCode);
  if (browserCode === "IE")
    browserName = "Microsoft Internet Explorer ";
  else if (browserCode === "FF")
    browserName = "Firefox ";
  else if (browserCode === "OP")
    browserName = "Opera ";
  else if (browserCode === "SA")
    browserName = "Safari ";
  else { // If nothing else this must be GG
    document.getElementById('browser').innerHTML = begMessage + "a version of Google Chrome.";
  return;
  }

  if (isNaN(version)) {
    versionName = "with an unknown or early version.";
  } else {
    if (version === "0") {
      versionName = "with an unknown or early version.";
    } else {
      versionName = "version " + version;
      if (browserCode === "SA")
      versionName += ".x"; // Special case for Safari to append ".x" as 3rd digit isn't extracted.
    }
  }
  document.getElementById('browser').innerHTML = begMessage + browserName + versionName + ".";
  return;
}

/** This tests a browser in the order given in the array browserStrn[], and returns the corresponding 2
* letter codes as follows from the array browserCode[]: IE - Microsoft Internet Explorer, FF - Firefox,
* OP - Opera, GG - Google Chrome, SA - Safari and UN - Unknown browser.  IE and FF are unambiguous, but
* OP, GG and SA, share some common sub-strings.  OP contains "OPR", which is unique, but GG and SA both
* contain "Chrome", so they have to be tested in this order.
*
* This is called from: (1) a web page and is used to generate a warning message or display alternative
* content when a browser is incompatible without regard to its version, (2) from getBrowserAndVersion(),
* which is in turn called from a web page to display on that page the browser version, if known,
* together with its name, and (3) from jCanBrowComp(), which it also uses to find the browser's name and
* version number.  In this latter case the index getBrowser.i is needed.
*
* This is based on code from: https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator. */
function getBrowser() {
  var browserStrn = ["MSIE", "Firefox", "OPR", "Chrome", "Safari"]; // Browser search strings.
  var browserCode = ["IE", "FF", "OP", "GG", "SA", "UN"];           // Browser codes.
  var sUsrAg = navigator.userAgent;                                 // Use navigator.userAgent.
  for (var i=0; i<5; i++) {                                         // Loop through the 5 browsers.
    if (sUsrAg.indexOf(browserStrn[i]) < 0) continue;               // Skip if the search string is not found.
    getBrowser.i = i;                                               // Get the index.
    return browserCode[i];                                          // Return the code with the index.
  }
  return browserCode[5];                                            // Nothing found so return with "UN".
}

/** This returns the version number of a browser given the two letter code specified in getBrowser(), 
* or 0 if there is no version number given or tested, or an unknown browser is used.  The code was
* obtained from http://www.javascriptkit.com/javatutors/navigator.shtml for Firefox, Internet Explorer
* and Opera, and code was added for Safari.  Google Chrome is not currently tested. */
function getVersion(browserCode) {

  // Test for Firefox version.
  if (browserCode == "FF") {
    if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {  // Test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
      var ffversion = new Number(RegExp.$1);                    // capture x.x portion and store as a number
      if (ffversion >= 35) return ffversion.toString();
      if (ffversion >= 5) return "5.x";
      if (ffversion >= 4) return "4.x";
      if (ffversion >= 3) return "3.x";
      if (ffversion >= 2) return "2.x";
      if (ffversion >= 1) return "1.x";
    }
    return "0";
  }

  // Test for Microsoft Internet Explorer Version - "UN" might be a version.
  if (browserCode == "IE" || browserCode == "UN") {
    var detectIEregexp;
    if (browserCode == "IE")
      detectIEregexp = /MSIE (\d+\.\d+);/             // Test for MSIE x.x
    else                                              // If no "MSIE" string in userAgent
     detectIEregexp = /Trident.*rv[ :]*(\d+\.\d+)/    // Test for rv:x.x or rv x.x where Trident string exists

    if (detectIEregexp.test(navigator.userAgent)) {   // If some form of IE.
      var ieversion = new Number(RegExp.$1);          // capture x.x portion and store as a number
      if (ieversion >= 8) return ieversion.toString();
      if (ieversion >= 7) return "7.x";
      if (ieversion >= 6) return "6.x";
      if (ieversion >= 5) return "5.x";
    }
  return "0";
  }

  // Test for Opera Version 15 and above.
  if (browserCode == "OP") {
    var opera15andabovever = /OPR\/(\d+\.\d+)/i.test(navigator.userAgent) // Test and capture Opera 15+ version
    if (opera15andabovever) return RegExp.$1;
    return "0";
	}

  // Test for Safari Version - Code based on Firefox and returns "x.x" out of "x.x.x".
  if (browserCode == "SA") {
    if (/Version[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
      var sversion = RegExp.$1;
      return sversion;
    }
    return "0";
  }
	
  // Test for Google Chrome Version - No version tests implemented yet.
  if (browserCode == "GG") {
    return "0";
  }

  // Fall-back fail - As "UN" is currently tested for Internet Explorer this will never return.
  return "0";
}
Return to Technical Details.