How can I target only Internet Explorer 11 with JavaScript?

Question

What's the least error-prone way to target just IE11 with JavaScript?

Note: This should really only be done for analytics or informing the user what browser they're using. For everything else, there's feature detection.

Answer 1

The User-agent string for IE 11 is currently this one :

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko 

Windows 10 example:

Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko 

Which means your can simply test, for versions 11.xx,

var isIE11 = /Trident.*rv[ :]*11\./.test(navigator.userAgent); 

As IE10 user agent was

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0) 

it's probably also safe to bet on the fact that now Trident/X is supposed to be the real versionning.

Answer 2

IE11 keeps "Trident" in it's UA string, but drops MSIE. A simple way to detect the browser is IE11 or above (IE12, IE13, etc) is:

var isAtLeastIE11 = !!(navigator.userAgent.match(/Trident/) && !navigator.userAgent.match(/MSIE/)); 

If you want just IE11 (and you don't want future versions of IE to match), do this:

var isIE11 = !!(navigator.userAgent.match(/Trident/) && navigator.userAgent.match(/rv[ :]11/)); 

Answer 3

Here's a script you can use to detect any browser:

<script>

  // Opera
  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'] || safari.pushNotification);

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

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

  // Chrome 1+
  var isChrome = !!window.chrome && !!window.chrome.webstore;

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

  if (isFirefox==true) {
    alert(isFirefox)
    $('.container-fluid').css({"overflow-y":"auto","height":"150%"});  
  }

</script>