Detect the browser with javascript

The following javascript should be used to detect the browser in which it is running.

function WhichBrowser(){
      //IE
      if(navigator.appName == "Microsoft Internet Explorer"){
        return "msie";
      }
      
      //Chrome
      if((navigator.userAgent.toLowerCase().indexOf('chrome') > -1) && (navigator.userAgent.toLowerCase().indexOf('safari') > -1) && (navigator.appName == "Netscape")){
        return "chrome";
      }
      //Firefox
      if((navigator.userAgent.toLowerCase().indexOf('firefox') > -1) && (navigator.appName == "Netscape")){
        return "firefox";
      }
      //Safari
      if((navigator.userAgent.toLowerCase().indexOf('safari') > -1) && !(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) && (navigator.appName == "Netscape")){
        return "safari";
      }
      
      //Opera
      if(navigator.appName == "Opera"){
        return "opera";
      }
}

Considering that the most used browsers are: Microsoft Internet Explorer, Firefox, Google Chrome, Safari and Opera (look for example at: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers), the script return:

  • msie when the browser is Microsoft Internet Explorer
  • firefox when the browser is Firefox
  • chrome when the browser is Google Chrome
  • safari when the browser is Apple Safari
  • opera when the browser is Opera

In other words, return the browser name lowercase.

The following scripts do the same job, but are "boolean routines"; this means that each routine detect just one kind of browser returning true or false. For example the routine isChrome() return true if run into the Google Chrome's browser.

function isIE(){
      if(navigator.appName == "Microsoft Internet Explorer"){
        return true;
      }
      return false;
}
function isChrome(){
      if((navigator.userAgent.toLowerCase().indexOf('chrome') > -1) && (navigator.userAgent.toLowerCase().indexOf('safari') > -1) && (navigator.appName == "Netscape")){
        return true;
      }
      return false;    
}
function isFirefox(){
      if((navigator.userAgent.toLowerCase().indexOf('firefox') > -1) && (navigator.appName == "Netscape")){
        return true;
      }
      return false;
}
function isSafari(){
      if((navigator.userAgent.toLowerCase().indexOf('safari') > -1) && !(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) && (navigator.appName == "Netscape")){
        return true;
      }
      return false;
}
function isOpera(){
      if(navigator.appName == "Opera"){
        return true;
      }
      return false;
}

Both Internet Explorer and Opera have the appName property with the "real name" of the browser. For all the other browsers the appName is Netscape and the appCodeName is Mozilla, so we need to investigate the userAgent property to detect the "real" browser. The values of the userAgent for these browsers are the following:

  1. Firefox: mozilla/5.0 (windows nt 6.1; wow64; rv:18.0) gecko/20100101 firefox/18.0firefox
  2. Google Chrome: mozilla/5.0 (windows nt 6.1; wow64) applewebkit/537.17 (khtml, like gecko) chrome/24.0.1312.57 safari/537.17chrome
  3. Safari: mozilla/5.0 (windows nt 6.1; wow64) applewebkit/534.57.2 (khtml, like gecko) version/5.1.7 safari/534.57.2safari

The code: navigator.userAgent.toLowerCase().indexOf('firefox') > -1 just means that the string "firefox" is found into the userAgent property string's value. The remaining code is easy to understand and you can download all the package from below.

Attachments:
FileDescriptionFile sizeDownloadsCreated
Download this file (browser.zip)Detect BrowserJavascript functions to detect different kind of web browsers1 kB4702013-02-07 18:40