Reliably Detect IE7 in IE6 document mode

127 Views Asked by At

I understand this is a very specific, obscure question, so don't @ me with use cases or best practices. I know to test for feature-specific support. I understand that IE is horribly outdated.

IE6 can sometimes report as IE7 after the Windows Service Pack Update (SP3). I can reliably test for IE6 masquerading as IE7 by using conditional compilation and feature detecting XMLHttpRequest, but I am pretty sure that IE7 in IE6 document mode (or earlier modes, honestly) will also test negative for XMLHttpRequest.

Is there a way to reliably determine whether IE's browser engine is IE6 or 7, regardless of document mode?

2

There are 2 best solutions below

0
Kithraya On BEST ANSWER

Document Mode is a feature that isn't supported until IE8.

So all you need to do to is check for a feature that is supported in IE7, but not IE6.

0
Zhi Lv On

According to the XMLHttpRequest browser compatibility, we can see that the XMLHttpRequest support IE 7+. If we want to use it in IE 5, we should use it via ActiveXObject('Microsoft.XMLHTTP'). So, we could use this feature to detect IE 7 browser.

For IE6 masquerading as IE7, I suppose perhaps you are using userAgent string to detect IE browser version. After testing the UserAgent on my side, it seems that at present, if we change the F12 developer Emulation to IE 5 and IE 7 mode, the UserAgent string as below:

  • IE 7 Mode: "mozilla/4.0 (compatible; msie 7.0; windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; .net clr 2.0.50727; .net clr 3.0.30729; .net clr 3.5.30729) "

  • IE 5 Mode: "mozilla/4.0 (compatible; msie 7.0; windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; .net clr 2.0.50727; .net clr 3.0.30729; .net clr 3.5.30729) "

As we can see that, they are using the same UserAgent, it seems that in IE 5 mode, Internet Explorer changes its User Agent with "MSIE 7.0".

I also try to use Conditional Comment to detect IE browser version, it seems that it works well on IE 5+.

Please check the following sample:

<center>
    <h1 style="color:blue">How to detect IE</h1>
    <script>
        //detects if user is using Internet Explorer based on the userAgent
        //returns version of IE or false, if browser is not IE
        //Function to detect IE or not
        function IEdetection() {
            var ua = window.navigator.userAgent;
            var msie = ua.indexOf('MSIE ');
            if (msie > 0) {
                // IE 10 or older, return version number
                return ('IE ' + parseInt(ua.substring(
                    msie + 5, ua.indexOf('.', msie)), 10));
            }
            var trident = ua.indexOf('Trident/');
            if (trident > 0) {
                // IE 11, return version number
                var rv = ua.indexOf('rv:');
                return ('IE ' + parseInt(ua.substring(
                    rv + 3, ua.indexOf('.', rv)), 10));
            }
            var edge = ua.indexOf('Edge/');
            if (edge > 0) {
                //Edge (IE 12+), return version number
                return ('IE ' + parseInt(ua.substring(
                    edge + 5, ua.indexOf('.', edge)), 10));
            } 
            // User uses other browser
            return ('Not IE');
        }
        var result = IEdetection();
        document.write("UserAgent: <br/>");
        document.write(window.navigator.userAgent);

        document.write("<br/>Using UserAgent detection, result: <br/>");
        document.write(result);


        var ie = (function () {
            if (window.ActiveXObject === undefined) return null; //Not IE
            if (!window.XMLHttpRequest) return 6;
            if (!document.querySelector) return 7;
            if (!document.addEventListener) return 8;
            if (!window.atob) return 9;
            if (!document.__proto__) return 10;
            return 11;
        })();
        document.write("<br/>Using feature detection, Result:<br/>");
        document.write(ie);
    </script>


<!--[if IE 5]>
<p class="ieversion" data_version="5">You are using Internet Explorer 5.</p>
<![endif]-->
<!--[if IE 7]>
<p class="ieversion" data_version="7">You are using Internet Explorer 7.</p>
<![endif]-->
<!--[if IE 9]>
<p class="ieversion" data_version="9">You are using Internet Explorer 9.</p>
<![endif]-->

    <script>
        if (!document.getElementsByClassName) {
            document.getElementsByClassName = function (search) {
                var d = document, elements, pattern, i, results = [];
                if (d.querySelectorAll) { // IE8
                    return d.querySelectorAll("." + search);
                }
                if (d.evaluate) { // IE6, IE7
                    pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
                    elements = d.evaluate(pattern, d, null, 0, null);
                    while ((i = elements.iterateNext())) {
                        results.push(i);
                    }
                } else {
                    elements = d.getElementsByTagName("*");
                    pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
                    for (i = 0; i < elements.length; i++) {
                        if (pattern.test(elements[i].className)) {
                            results.push(elements[i]);
                        }
                    }
                }
                return results;
            }
        }
        var item = document.getElementsByClassName("ieversion");
        if (item.length > 0) {
            document.write("<br />Using Conditional comment + JavaScript, result:<br/>");
            document.write("IE version: " + item[0].getAttribute("data_version"));
        }
    </script>
</center>

The result as below:

enter image description here

Since, the Conditional comment support from IE 5 to IE 9, but it doesn't supported in Internet Explorer 10 and 11. So, you could use the Conditional comment to detect IE 5 ~ IE 9 and use UserAgent to detect IE 10 and IE 11.