Identify IE9/IE10 using jQuery

jquery html internet-explorer browser-detection

32,276

Solution 1

Can be achieved without using libraries or conditional compilation:

if (document.addEventListener) {
    alert("IE9 or greater");
}

if (window.requestAnimationFrame) {
    alert("IE10 or greater");
}

Solution 2

Just do like this

if ($.browser.msie  && parseInt($.browser.version, 10) > 8) {
  alert('IE9 or IE10'); 
} else {
  alert('Non IE9 or IE10');
}

This should work for jQuery version under 1.9. If you use 1.9+, read this thread or consider using modernizr.

Solution 3

The only reliable way to detect the currently active IE version (possibly emulated) is to combine conditional compilation and a document.documentMode check.

Conditional compilation is optional, but it allows you to never run the IE-detection script for non-IE browsers.

For example:

if (/*@cc_on !@*/false && (
       document.documentMode === 9 || document.documentMode === 10)
   ) {
    // IE 9 or 10 (not 8 or 11!)
    document.documentElement.className += ' ie9 ie10';
}

The previous code is not safe against minifiers. If you're going to minify your code, put the conditional compilation stuff in a string, and eval it:

if (eval('/*@cc_on !@*/false') && ( ... )) { ... }

Solution 4

Older jQuery versions before 1.9 offered $.browser to get this. Now jQuery wants you to check for functions instead via $.support.

A pretty good alternative is modernizr (http://modernizr.com/). Modernizr adds classes to your root element like msie or ie9 or webkit or touch and so on.

So you can easily check:

if ($('html').hasClass('ie9')) {
    // do something
}

Solution 5

I know this is an old question. but in case you haven’t found an answer.

Show a message if the browser is not internet explorer 9 or greater

browser={};
if (/(chrome\/[0-9]{2})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[0];
    browser.version  = parseInt(navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(firefox\/[0-9]{2})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[0];
    browser.version  = parseInt(navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(MSIE\ [0-9]{1})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(MSIE\ [0-9]{1})/i)[0].split(" ")[0];
    browser.version  = parseInt(navigator.userAgent.match(/(MSIE\ [0-9]{1})/i)[0].split(" ")[1]);
} else if (/(Opera\/[0-9]{1})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[0];
    browser.version  = parseInt(navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[1]);
} else if (/(Trident\/[7]{1})/i.test(navigator.userAgent)) {
    browser.agent = "MSIE";
    browser.version  = 11;
} else {
    browser.agent = false;
    browser.version  = false;
}

if (/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/.test(navigator.userAgent)) {
    browser.os = "Windows";
    switch(parseFloat(navigator.userAgent.match(/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/)[0].split(" ")[2])) {
    case 6.0:
        browser.osversion = "Vista";
        break;
    case 6.1:
        browser.osversion = "7";
        break;
    case 6.2:
        browser.osversion = "8";
        break;
    default:
        browser.osversion = false;
    }
} else if (/(OS\ X\ [0-9]{2}\.[0-9]{1})/.test(navigator.userAgent)) {
    browser.os = "OS X";
    browser.osversion = navigator.userAgent.match(/(OS\ X\ [0-9]{2}\.[0-9]{1})/)[0].split(" ")[2];
} else if (/(Linux)/.test(navigator.userAgent)) {
    browser.os = "Linux";
    browser.osversion = false;
}

View more solutions

32,276

Author by

Nitish T

Updated on May 22, 2020

Comments

Nitish T about 4 years

I have a jQuery code which is working fine for Chrome/Mozilla but not IE.

if ($("html").hasClass("ie")) {
    $(function(){
        $('.green-column, .red-column, .grey-column').click(function() { 
             alert ($(this).attr("data-type"));           
        });
    });
}
else {
 $(function(){
        $('.green-column, .red-column, .grey-column').click(function() { 
         $("<div title='Selected Task is:'>" + $(this).attr("data-type") + "</div>").dialog({ 
             modal: true,
             resizable: false,
             buttons: [
                {
                   text: "OK", 
                   click: function() { $( this ).dialog( "close" ); }
                }
             ]
         });
    });
});
}
</script> 
<!--[if IE 7]>    <html lang="en-us" class="ie"> <![endif]-->
<!--[if IE 8]>    <html lang="en-us" class="ie"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="ie"> <!--<![endif]-->

So I plan to use an alert for IE9/IE10 but I am not able to differentiate between the browsers. Can anyone tell me how to identify IE9/IE10 in jQuery/HTML?