JavaScript: Can I detect IE9 if it's in IE7 or IE8 compatibility mode?

JavascriptInternet Explorer-9Ie8 Compatibility-Mode

Javascript Problem Overview


I need to know if the browser that's identifying itself via user agent string as being IE7 or IE8 is really those browsers, or whether it's IE9 in 7 or 8 compatibility mode.

From what I can see in the user agent string, an IE9 in IE7 compatibility mode, provides an identical string to a real IE7. Is there an extra property/element/object that I can test to see if it's "really" IE9 in disguise?

I assume the document mode won't help as the page my script is loaded into could either be forcing quirks or forcing a specific setting.

I'm hoping that IE9 will have some property that exists and is testable regardless of whether it's in 7, 8 or 9 mode.


Edited to add…

OK, I see where I was going wrong now. I was using the "Browser Mode" dropdown and switching it to IE8 and IE7 and thinking this was "IE8 compatibility mode" and "IE7 compatibility mode" respectively. This is of course not true. The developer tools' Browser mode really is switching it to "be like" those old browsers, so it's only right that the original useragent strings be reported.

If I leave the browser mode in IE9 or IE9 compatibility and try the document mode dropdown variants instead, then I do in fact get "Trident/5.0" present in all 8 combinations (two browser modes and 4 document modes). I just need to steer clear of choosing browser mode IE7 and IE8 because they really are (simulated) IE7 and IE8.

So there's no way a page, a non-developer user, a meta tag, or Microsoft's compatibility list will be able to put IE9 into this unidentifiable state.

Just using if(navigator.userAgent.indexOf("Trident/5")>-1) will be sufficient.

Don't worry, this isn't for styles, formatting, logic or page content. I use feature detection for those things. I just need to detect IE9 (regardless of what mode it's in) and make a non-page content decision on that.

Thanks for steering me towards the answer with your suggestions and links.

Javascript Solutions


Solution 1 - Javascript

Actually the user agent string is different for IE9 when being run in IE7 compatibility mode, so this would be one of the best ways to distinguish between different IE versions.

Introducing IE9’s User Agent String:

> Similar to IE8, IE9’s Compatibility > View will map to IE7 Standards Mode, > and IE9’s UA string when in > Compatibility View will be: > > Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0) > > In Compatibility View, IE9 reports > itself as IE7 through the application > version number (Mozilla/4.0) and > version token (MSIE 7.0). This is done > for compatibility. An incremented > Trident token, from ‘Trident/4.0’ to > ‘Trident/5.0’, allows websites to > distinguish between IE9 running in > Compat View and IE8 running in Compat > View.

(emphasis added by me). So the user agent string is the same as it reports itself being "Mozilla/4.0" and MSIE 7.0, but IE9 will always be Trident/5.0 - no matter whether it says MSIE 7.0, MSIE 8.0 or MSIE 9.0.

Actually you should check out this great compilation: Browser ID (User-Agent) Strings or even better useragentstrings.com

Solution 2 - Javascript

document.documentMode is the best way for document mode.

Solution 3 - Javascript

IE7 doesn't contain any information on Trident

User-Agent : Mozilla/4.0 (compatible; MSIE 7.0)

IE8 contains this string: "Trident/4.0"

User-Agent : Mozilla/4.0 (compatible; MSIE 8.0; Trident/4.0)

IE9 contains this string: "Trident/5.0"

IE9 in compatability mode:

User-Agent : Mozilla/4.0 (compatible; MSIE 7.0; Trident/5.0)

IE9 in normal mode:

User-Agent : Mozilla/5.0 (compatible; MSIE 9.0; Trident/5.0)

Solution 4 - Javascript

Solution 5 - Javascript

I'm hoping that IE9 will have some property that exists and is testable regardless of whether it's in 7, 8 or 9 mode.

Check e.g. for style.opacity, it was introduced in IE9 and is available regardless of the compatibility-mode:

<![if IE]> 
<script>
if(typeof document.documentElement.style.opacity!='undefined')
{
  //this must be at least IE9 
}
</script>
<![endif]>

Solution 6 - Javascript

It is sometimes necessary to read the user Agent string from server Variable, not from javascript navigator object.

Compare the differences:

  • ASP classic, IE11

  • client javascript, navigator.userAgent: "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; BOIE9;ENUS)"

  • server ASP, Request.ServerVariables("HTTP_USER_AGENT"): "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; BOIE9;ENUS; rv:11.0) like Gecko"

  • ASP classic, IE11 Compatibility mode:

    • client javascript, navigator.userAgent: "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; BOIE9;ENUS))"

    • server ASP, Request.ServerVariables("HTTP_USER_AGENT"): "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; BOIE9;ENUS)"

Solution 7 - Javascript

From https://stackoverflow.com/a/29288153/2879498

Assuming you have a hidden element with the ID compat-warning:

Javascript w/ jQuery:

$(function(){
    function showCompatWarning() {
        $('#compat-warning')
            .css('display','block')
            .css('height','auto')
            .show();
    }
    var tridentOffset = navigator.appVersion.indexOf('Trident/');
    if ( tridentOffset === -1 ) return;
    var jscriptVersion = 0;
    /*@cc_on @*/
    /*@if (@_jscript) jscriptVersion = @_jscript_version ; @*/;
    /*@end @*/
    var tridentVersion = parseInt(navigator.appVersion.substr(tridentOffset+8),10);
    var guessIEVersion = tridentVersion + 4;
    if (( document.documentMode && jscriptVersion && jscriptVersion < 10 && jscriptVersion !== document.documentMode ) ||
        ( document.compatMode && document.compatMode === 'BackCompat') ||
        ( document.documentMode && document.documentMode < 10 && document.documentMode != guessIEVersion ))
        showCompatWarning();
});

Detection and warnings, your first and last lines of defense against compatibility hell.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDee2000View Question on Stackoverflow
Solution 1 - JavascriptDennis GView Answer on Stackoverflow
Solution 2 - JavascriptYuhong BaoView Answer on Stackoverflow
Solution 3 - JavascriptGregView Answer on Stackoverflow
Solution 4 - JavascriptPredrag StojadinovićView Answer on Stackoverflow
Solution 5 - JavascriptDr.MolleView Answer on Stackoverflow
Solution 6 - JavascriptPažoutView Answer on Stackoverflow
Solution 7 - JavascriptTylerY86View Answer on Stackoverflow