cryofuse.com - Development | Javascript | Library

CONTRIBUTOR: Shahjahan Alhassan - 21st Oct 2001

With multiple browsers on the market it is sometimes difficult to create a piece of code that works on all. Therefore by detecting the user's browser and/or system individual pieces of code can be written to work with each and the appropriate one used.

Code example

Your system information is listed below:

Steps

Insert the source code within the <HEAD> </HEAD> tags of your page.

The function, <SCRIPT>detect("value")</SCRIPT>, can then be used within your code to return the value you require.

Use the chart below to view which values can be found and what results will be returned.

Value	Usage	Possible Results
Browser's name	detect("browsername")	explorer, netscape, aol, webtv, other
Browser's version	detect("browserversion")	Browser version
Platform's name	detect("platformname")	windows, mac, linux, unix, irix, sunos, hp-ux, webtv, other
Platform's version (Windows only)	detect("platformversion")	98, 95, 3,1, NT, other
Number of plugins installed (Netscape only)	detect("plugins")	Number of plugins
Check if plugin installed (Netscape only)	detect("plugin","Name of plugin")	true, false
Is Java enabled	detect("java")	true, false
Are cookies enabled (Windows only)	detect("cookies")	true, false, unknown
Colour depth	detect("colourdepth")	8, 16, 24, 32 (bit)
Number of colours	detect("colours")	Number of colours
Screen width	detect("screenwidth")	Number of pixels
Available screen width	detect("availablescreenwidth")	Number of pixels
Screen height	detect("screenheight")	Number of pixels
Available screen height	detect("availablescreenheight")	Number of pixels
Referrer	detect("referrer")	URL

Source code [Select all code]

<script language="javascript">

function detect(detectoption,variable)
{

  var browsername;
  var browserversion;
  var platformname;
  var platformversion;
  var plugins;
  var plugin;
  var java;
  var cookies;
  var colourdepth;
  var colours;
  var screenwidth;
  var availablescreenwidth;
  var screenheight;
  var availablescreenheight;
  var referrer;
  
  
  // Browser name..............................................................
  
  if (detectoption == "browsername")
  {
    // Return results: explorer, netscape, aol, webtv, other

    if (navigator.appName == "Microsoft Internet Explorer")
    {
      browsername="explorer";
    }
    else if (navigator.appName == "Netscape")
    {
      browsername="netscape";
    }
    else if (navigator.userAgent.indexOf("AOL") != -1)
    {
      platformname="aol";
    }
    else if (navigator.appName == "WebTV Internet Terminal")
    {
      browsername="webtv";
    }
    else
    {
      browsername="other"
    }

    return browsername;
  }
  
  
  // Browser version...........................................................

  else if (detectoption == "browserversion")
  {
    // Return results: Browser version

    // IE Returns 4, even if it's 5 so we have to find the real version from the headers.
    
    if (navigator.appName == "Microsoft Internet Explorer")
    {
      var startpos   = navigator.appVersion.indexOf("MSIE") + 5;          // Set the start position
      var endpos     = (startpos + 3);                                    // Set the end position
      browserversion = navigator.appVersion.substring(startpos, endpos);  // Get the browser version
    }
    else
    {
      browserversion = parseFloat(navigator.appVersion);
    }
    
    return browserversion;
  }
  
  
  // Platform name.............................................................

  else if (detectoption == "platformname")
  {
    // Return results: windows, mac, linux, unix, irix, sunos, hp-ux, webtv, other

    if (navigator.userAgent.indexOf("Win") != -1)
    {
      platformname="windows";
    }
    else if (navigator.userAgent.indexOf("Mac") != -1)
    {
      platformname="mac";
    }
    else if (navigator.userAgent.indexOf("Linux") != -1)
    {
      platformname="linux";
    }
    else if (navigator.userAgent.indexOf("Unix") != -1)
    {
      platformname="unix";
    }
    else if (navigator.userAgent.indexOf("IRIX") != -1)
    {
      platformname="irix";
    }
    else if (navigator.userAgent.indexOf("SunOS") != -1)
    {
      platformname="sunos";
    }
    else if (navigator.userAgent.indexOf("HP") != -1)
    {
      platformname="hp-ux";
    }
    else if (navigator.userAgent.indexOf("WebTV Internet Terminal") != -1)
    {
      platformname="webtv";
    }
    else
    {
      platformname="other"
    }

    return platformname;
  }
  
  
  // Platform version (Windows only)...........................................

  else if (detectoption == "platformversion")
  {
    // Return results: 98, 95, 3,1, NT, other
  
    if (navigator.userAgent.indexOf("Win") != -1)
    {
      if ((navigator.userAgent.indexOf('Win') != -1) && (navigator.userAgent.indexOf('98') != -1))
      { 
        platformversion = "98"; 
      }
      else if ((navigator.userAgent.indexOf('Win') != -1) && (navigator.userAgent.indexOf('95') != -1))
      { 
        platformversion = "95"; 
      }
      else if (navigator.appVersion.indexOf("16") !=-1)
      { 
        platformversion = "3.1"; 
      }
      else if (navigator.appVersion.indexOf("NT") !=-1)
      { 
        platformversion = "NT"; 
      }
      else
      {
        platformversion = "other"
      }
      
    }
    
    return platformversion;
  
  }
  
  
  // Plugins (Netscape only)...................................................

  else if (detectoption == "plugins")
  {
    // Return results: Number of plugins
    
    plugins=navigator.plugins.length;

    return plugins;
  }
  
  
  // Plugin (Netscape only)....................................................

  else if (detectoption == "plugin")
  {
    // Return results: true, false
    
    plugin="false";
    
    for (i=0; i<navigator.plugins.length; i++)
    {
      if (navigator.plugins[i].name.indexOf(variable) >= 0)
      {
        plugin = "true";
      }
    }

    return plugin;
  }
  
  
  // Java enabled..............................................................
  
  else if (detectoption == "java")
  {
    // Return results: true, false

    if (navigator.javaEnabled() == true)
    {
      java = "true";
    }
    else
    {
      java = "false";
    }

    return java;
  }
  

  // Cookie enabled (Windows only).............................................
  
  else if (detectoption == "cookies")
  {
    // Return results: true, false, unknown

    if (navigator.appName == "Netscape")
    {
      cookies = "unknown";  // Netscape does not reveal this
    }
    else if (navigator.cookieEnabled == true)
    {
      cookies = "true";
    }
    else
    {
      cookies = "false";
    }

    return cookies;
  }


  // Colour depth..............................................................
  
  else if (detectoption == "colourdepth")
  {
    // Return results: 8, 16, 24, 32 (bit)
    
    colourdepth = window.screen.colorDepth;
    
    return colourdepth;
  }

  
  // Colours...................................................................
  
  else if (detectoption == "colours")
  {
    // Return results: Number of colours
    
    colours = Math.pow (2, window.screen.colorDepth);
    
    return colours;
  }
  

  // Screen width..............................................................
  
  else if (detectoption == "screenwidth")
  {
    // Return results: Screen width (pixels)
    
    screenwidth = window.screen.width;
    
    return screenwidth;
  }
  

  // Available screen width....................................................
  
  else if (detectoption == "availablescreenwidth")
  {
    // Return results: Available screen width (pixels)
    
    availablescreenwidth = window.screen.availWidth;
    
    return availablescreenwidth;
  }

  
  // Screen height..............................................................
  
  else if (detectoption == "screenheight")
  {
    // Return results: Screen height (pixels)
    
    screenheight = window.screen.height;
    
    return screenheight;
  }
  

  // Available screen height....................................................
  
  else if (detectoption == "availablescreenheight")
  {
    // Return results: Available screen height (pixels)
    
    availablescreenheight = window.screen.availHeight;
    
    return availablescreenheight;
  }
  

  // Referrer..................................................................
  
  else if (detectoption == "referrer")
  {
    // Return results: Previous page url
    
    referrer = document.referrer;
    
    return referrer;
  }
  

}

</script>