Generic User Agent Detection In JavaScript

Detecting the user agent in JavaScript can be important due to the way in which different browsers implement JavaScript. Sometimes it is necessary to create logic to do one thing in Firefox and another thing in IE. Luckily, all modern browsers support the navigator.userAgent property so that is a good start.

Because it is possible to mask your user agent in Opera it is necessary to detect this browser first. There are actually two different ways to hide the user agent in Opera. The default user agent is as follows:

Opera/9.23 (Windows NT 5.1; U; en)

It is possible to identify Opera as either Firefox or Internet Explorer. In this case the version of Opera is appended to the end of the user agent string so it is still possible to detect if the user has Opera and act accordingly.

Identify as IE

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.23

Identify as Firefox

Mozilla/5.0 (Windows NT 5.1; U; en; rv:1.8.0) Gecko/20060728 Firefox/1.5.0 Opera 9.23

It is also possible to mask Opera as either Firefox or Internet Explorer. In this case the Opera browser is completely hidden and as far as JavaScript is concerned it can see Firefox or Internet Explorer.

Mask as IE

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en)

Mask as Firefox

Mozilla/5.0 (Windows NT 5.1; U; en; rv:1.8.0) Gecko/20060728 Firefox/1.5.0

To detect the presence of non-masked Opera you can use the a boolean options called isOpera which is set by looking for any instance of the word Opera.

var isOpera = sUserAgent.indexOf("Opera") > -1;

To detect the presence of Opera with masking turned on you can use the window.opera object. If this is present then you can assume the user is running Opera.

if(window.opera){
  alert('opera!');
  isOpera = true;
}

Next, you must detect the presence of Internet Explorer. To do this you need to look for the words "compatible" and "MSIE", but still make sure that the isOpera variable is false.

var isIE = sUserAgent.indexOf("compatible") > -1 
  && sUserAgent.indexOf("MSIE") > -1
  && !isOpera;

Detecting the presence of Safari is relatively straight forward. The Safari user agent string looks like this.

 Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/xx.x (KHTML, like Gecko) Safari/yy.y

So a simple test to see if the string "Apple" or "Safari" is contained within the user agent is a sufficient enough test.

An alternate way of user agent detection is to see what objects are available to you. For example, anyone using Internet Explorer on a Windows system will have the object window.ActiveXObject available. If they are using any other browser then this object will be undefined. So to test for this use the typeof operator.

if(typeof window.ActiveXObject != "undefined"){
  // user is using IE
}

This is a more reliable way of detecting what browser is in use as it gets past Opera masking the user agent. It is better to just test for the correct objects when they are needed, rather than write different versions of code for different browsers.