Browser Detection in JavaScript

How to detect Safari, Chrome, IE, Firefox and Opera browsers?

Googling for browser reliable detection often results in checking the User agent string. This method is not reliable, because it's trivial to spoof this value.

I've written a method to detect browsers by duck-typing.

Only use the browser detection method if it's truly necessary, such as showing browser-specific instructions to install an extension. Use feature detection when possible.

Demo: https://jsfiddle.net/6spj1059/

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

How can you detect the version of a browser?

You can see what the browser says, and use that information for logging or testing multiple browsers.

navigator.sayswho= (function(){
    var ua= navigator.userAgent;
    var tem; 
    var M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

console.log(navigator.sayswho); // outputs: `Chrome 62`

Browser detection in JavaScript?

navigator.saysWho = (() => {
  const { userAgent } = navigator
  let match = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []
  let temp

  if (/trident/i.test(match[1])) {
    temp = /\brv[ :]+(\d+)/g.exec(userAgent) || []

    return `IE ${temp[1] || ''}`
  }

  if (match[1] === 'Chrome') {
    temp = userAgent.match(/\b(OPR|Edge)\/(\d+)/)

    if (temp !== null) {
      return temp.slice(1).join(' ').replace('OPR', 'Opera')
    }

    temp = userAgent.match(/\b(Edg)\/(\d+)/)

    if (temp !== null) {
      return temp.slice(1).join(' ').replace('Edg', 'Edge (Chromium)')
    }
  }

  match = match[2] ? [ match[1], match[2] ] : [ navigator.appName, navigator.appVersion, '-?' ]
  temp = userAgent.match(/version\/(\d+)/i)

  if (temp !== null) {
    match.splice(1, 1, temp[1])
  }

  return match.join(' ')
})()

console.log(navigator.saysWho) // outputs: `Chrome 89`

JavaScript: How to find out if the user browser is Chrome?

Update: Please see Jonathan's answer for an updated way to handle this. The answer below may still work, but it could likely trigger some false positives in other browsers.

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

However, as mentioned User Agents can be spoofed so it is always best to use feature-detection (e.g. Modernizer) when handling these issues, as other answers mention.

How to detect my browser version and operating system using JavaScript?

Detecting browser's details:

var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var fullVersion  = ''+parseFloat(navigator.appVersion); 
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;

// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
 browserName = "Opera";
 fullVersion = nAgt.substring(verOffset+6);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
 browserName = "Microsoft Internet Explorer";
 fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
 fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version" 
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
 fullVersion = nAgt.substring(verOffset+7);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox" 
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
 fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent 
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < 
          (verOffset=nAgt.lastIndexOf('/')) ) 
{
 browserName = nAgt.substring(nameOffset,verOffset);
 fullVersion = nAgt.substring(verOffset+1);
 if (browserName.toLowerCase()==browserName.toUpperCase()) {
  browserName = navigator.appName;
 }
}
// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1)
   fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1)
   fullVersion=fullVersion.substring(0,ix);

majorVersion = parseInt(''+fullVersion,10);
if (isNaN(majorVersion)) {
 fullVersion  = ''+parseFloat(navigator.appVersion); 
 majorVersion = parseInt(navigator.appVersion,10);
}

document.write(''
 +'Browser name  = '+browserName+'<br>'
 +'Full version  = '+fullVersion+'<br>'
 +'Major version = '+majorVersion+'<br>'
 +'navigator.appName = '+navigator.appName+'<br>'
 +'navigator.userAgent = '+navigator.userAgent+'<br>'
)

Source JavaScript: browser name.

See JSFiddle to detect Browser Details.

Detecting OS:

// This script sets OSName variable as follows:
// "Windows"    for all versions of Windows
// "MacOS"      for all versions of Macintosh OS
// "Linux"      for all versions of Linux
// "UNIX"       for all other UNIX flavors 
// "Unknown OS" indicates failure to detect the OS

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

document.write('Your OS: '+OSName);

source JavaScript: OS detection.

See JSFiddle to detect OS Details.

    var nVer = navigator.appVersion;

    var nAgt = navigator.userAgent;

    var browserName  = navigator.appName;

    var fullVersion  = ''+parseFloat(navigator.appVersion); 

    var majorVersion = parseInt(navigator.appVersion,10);

    var nameOffset,verOffset,ix;

    

    // In Opera, the true version is after "Opera" or after "Version"

    if ((verOffset=nAgt.indexOf("Opera"))!=-1) {

     browserName = "Opera";

     fullVersion = nAgt.substring(verOffset+6);

     if ((verOffset=nAgt.indexOf("Version"))!=-1) 

       fullVersion = nAgt.substring(verOffset+8);

    }

    // In MSIE, the true version is after "MSIE" in userAgent

    else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {

     browserName = "Microsoft Internet Explorer";

     fullVersion = nAgt.substring(verOffset+5);

    }

    // In Chrome, the true version is after "Chrome" 

    else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {

     browserName = "Chrome";

     fullVersion = nAgt.substring(verOffset+7);

    }

    // In Safari, the true version is after "Safari" or after "Version" 

    else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {

     browserName = "Safari";

     fullVersion = nAgt.substring(verOffset+7);

     if ((verOffset=nAgt.indexOf("Version"))!=-1) 

       fullVersion = nAgt.substring(verOffset+8);

    }

    // In Firefox, the true version is after "Firefox" 

    else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {

     browserName = "Firefox";

     fullVersion = nAgt.substring(verOffset+8);

    }

    // In most other browsers, "name/version" is at the end of userAgent 

    else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < 

              (verOffset=nAgt.lastIndexOf('/')) ) 

    {

     browserName = nAgt.substring(nameOffset,verOffset);

     fullVersion = nAgt.substring(verOffset+1);

     if (browserName.toLowerCase()==browserName.toUpperCase()) {

      browserName = navigator.appName;

     }

    }

    // trim the fullVersion string at semicolon/space if present

    if ((ix=fullVersion.indexOf(";"))!=-1)

       fullVersion=fullVersion.substring(0,ix);

    if ((ix=fullVersion.indexOf(" "))!=-1)

       fullVersion=fullVersion.substring(0,ix);

    

    majorVersion = parseInt(''+fullVersion,10);

    if (isNaN(majorVersion)) {

     fullVersion  = ''+parseFloat(navigator.appVersion); 

     majorVersion = parseInt(navigator.appVersion,10);

    }

    

    document.write(''

     +'Browser name  = '+browserName+'<br>'

     +'Full version  = '+fullVersion+'<br>'

     +'Major version = '+majorVersion+'<br>'

     +'navigator.appName = '+navigator.appName+'<br>'

     +'navigator.userAgent = '+navigator.userAgent+'<br>'

    )

    // This script sets OSName variable as follows:

    // "Windows"    for all versions of Windows

    // "MacOS"      for all versions of Macintosh OS

    // "Linux"      for all versions of Linux

    // "UNIX"       for all other UNIX flavors 

    // "Unknown OS" indicates failure to detect the OS

    

    var OSName="Unknown OS";

    if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";

    if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";

    if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";

    if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

    

    document.write('Your OS: '+OSName);

Browser Detection and Compatibility Checking with Java Script

Change your window.loacation.href calls to the below code:

if (UserAgent.compatibilityMode) {
    window.location.href = "http://192.168.10.236/iecorrect.html";
} else {
    window.location.href = "http://www.apple.com";
}

You wrote them like you would write jQuery :)

---

Related Topics