May 21, 2012

How can I detect client's browser type with JavaScript?

Many times for JavaScript developers is necessary to detect the type and the version of the client's (in other words: user's or visitor's) browser.

1. Usually it's enough to detect is the browser MS IExplorer or not. In this case, you can use the next code:
<script type="text/javascript">
  var bIsItMSIE = document.all ? true : false;
  alert("Your browser is " + (bIsItMSIE ? "" : "not") + " MS Internet Explorer");
</script>



2. If you like to use the most simplest way try this code (The Navigator object contains all information about the visitor's browser):
<script type="text/javascript">
alert("Browser CodeName: " + navigator.appCodeName
  + "\nBrowser Name: " + navigator.appName
  + "\nBrowser Version: " + navigator.appVersion
  + "\nCookies Enabled: " + navigator.cookieEnabled
  + "\nPlatform: " + navigator.platform
  + "\nUser-agent header: " + navigator.userAgent);
</script>


3. If you want to get more detailed information you can use the code below:
<script type="text/javascript">
  var sUserAgent = window.navigator.userAgent;
  if(/Firefox[\/\s](\d+\.\d+)/.test(sUserAgent)) sBrowserName = "Firefox";
  else if(/MSIE[\/\s](\d+\.\d+)/.test(sUserAgent)) sBrowserName = "MSIE";
  else if(/Opera[\/\s](\d+\.\d+)/.test(sUserAgent)) sBrowserName = "Opera";
  else if(/Chrome[\/\s](\d+\.\d+)/.test(sUserAgent)) sBrowserName = "Chrome";
  else if(/Version\/(\d+\.\d+)\s+Safari/.test(sUserAgent)) sBrowserName = "Safari";
  a = RegExp.$1.split(/\./);
  if(a && a.length) {
    sBrowserVersionMajor = a[0];
    sBrowserVersionMinor = a[1];
  }
  alert("Your browser is " + sBrowserName + " " + sBrowserVersionMajor + "." + sBrowserVersionMinor);
</script>

In code above the name of the browser is defined with variable sBrowserName. The browser's version number is defined with variable sBrowserVersionMajor. 

4. And the end let me to introduce how to detect client's browser type and version with jQuery. For this action you must use the Global jQuery Object jQuery.browser.
I put here a little sample but - attention - this code is not at all reliable!
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  var sBrowserName = "";
  var sBrowserVersion = "";
  jQuery.each(jQuery.browser, function(sIndex, sValue) {
    if(sIndex=="version") sBrowserVersion = sValue;
    else if(sValue==true) sBrowserName = sIndex;
  });
  function Check004() {
    alert("Your browser is " + sBrowserName + " " + sBrowserVersion);
    return false;
  }
</script>

Take care to notice that last code detects that your browser is "mozilla" - even if your browser is Firefox in fact! And it detects "safari" even if your browser is Google Chrome. :)





I like to use solution number 3 (above) because all things are "in my hand".
 

No comments:

Post a Comment