Detect IE version (prior to v9) in JavaScript

Detect IE version (prior to v9) in JavaScript

I want to bounce users of our web site to an error page if they’re using a version of Internet Explorer prior to v9. It’s just not worth our time and money to support IE pre-v9. Users of all other non-IE browsers are fine and shouldn’t be bounced. Here’s the proposed code:
if(navigator.appName.indexOf(“Internet Explorer”)!=-1){ //yeah, he’s using IE
var badBrowser=(
navigator.appVersion.indexOf(“MSIE 9”)==-1 && //v9 is ok
navigator.appVersion.indexOf(“MSIE 1”)==-1 //v10, 11, 12, etc. is fine too
);

if(badBrowser){
// navigate to error page
}
}

Will this code do the trick?
To head off a few comments that will probably be coming my way:

Yes, I know that users can forge their useragent string. I’m not concerned.
Yes, I know that programming pros prefer sniffing out feature-support instead of browser-type but I don’t feel this approach makes sense in this case. I already know that all (relevant) non-IE browsers support the features that I need and that all pre-v9 IE browsers don’t. Checking feature by feature throughout the site would be a waste.
Yes, I know that someone trying to access the site using IE v1 (or >= 20) wouldn’t get ‘badBrowser’ set to true and the warning page wouldn’t be displayed properly. That’s a risk we’re willing to take.
Yes, I know that Microsoft has “conditional comments” that can be used for precise browser version detection. IE no longer supports conditional comments as of IE 10, rendering this approach absolutely useless.

Related:  How to test behavior in the link function of a directive

Any other obvious issues to be aware of?

Solutions/Answers:

Solution 1:

This is my preferred way of doing it. It gives maximum control. (Note: Conditional statements are only supported in IE5 – 9.)

First set up your ie classes correctly

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->    
<head>

Then you can just use CSS to make style exceptions, or, if you require, you can add some simple JavaScript:

(function ($) {
    "use strict";

    // Detecting IE
    var oldIE;
    if ($('html').is('.lt-ie7, .lt-ie8, .lt-ie9')) {
        oldIE = true;
    }

    if (oldIE) {
        // Here's your JS for IE..
    } else {
        // ..And here's the full-fat code for everyone else
    }

}(jQuery));

Thanks to Paul Irish.

Solution 2:

Return IE version or if not IE return false

function isIE () {
  var myNav = navigator.userAgent.toLowerCase();
  return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

Example:

if (isIE () == 8) {
 // IE8 code
} else {
 // Other versions IE or not IE
}

or

if (isIE () && isIE () < 9) {
 // is IE version less than 9
} else {
 // is IE 9 and later or not IE
}

or

if (isIE()) {
 // is IE
} else {
 // Other browser
}

Solution 3:

If nobody else has added an addEventLister-method and you’re using the correct browser mode then you could check for IE 8 or less with

if (window.attachEvent && !window.addEventListener) {
    // "bad" IE
}

Legacy Internet Explorer and attachEvent (MDN)

Related:  Ajax, back button and DOM updates

Solution 4:

Use conditional comments. You’re trying to detect users of IE < 9 and conditional comments will work in those browsers; in other browsers (IE >= 10 and non-IE), the comments will be treated as normal HTML comments, which is what they are.

Example HTML:

<!--[if lt IE 9]>
WE DON'T LIKE YOUR BROWSER
<![endif]-->

You can also do this purely with script, if you need:

var div = document.createElement("div");
div.innerHTML = "<!--[if lt IE 9]><i></i><![endif]-->";
var isIeLessThan9 = (div.getElementsByTagName("i").length == 1);
if (isIeLessThan9) {
    alert("WE DON'T LIKE YOUR BROWSER");
}

Solution 5:

To detect MSIE (v6 – v7 – v8 – v9 – v10 – v11) easily :

if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
   // MSIE
}

Solution 6:

Here is the way AngularJS checks for IE

/**
 * documentMode is an IE-only property
 * http://msdn.microsoft.com/en-us/library/ie/cc196988(v=vs.85).aspx
 */
var msie = document.documentMode;

if (msie < 9) {
    // code for IE < 9
}