19

does anyone know how to check if IE 11 compatibility mode is ON when I'm on a website through javascript?

I added the url to the list compatibility view settings. But when I do

navigator.userAgent

in developer tools, it returns

Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; InfoPath.3; rv:11.0) like Gecko

Looking at the microsoft website (http://msdn.microsoft.com/en-us/library/ie/hh869301(v=vs.85).aspx), it says

The compatible ("compatible") and browser ("MSIE") tokens have been removed.

Any help on detecting whether a page is using compatibility view via javascript would be really helpful. Thanks in advance.

slee
  • 324
  • 2
  • 4
  • 14
  • 1
    Have you looked into `document.compatMode` and `documentMode`? (I don’t now if those are relevant/available in IE 11 any more.) – CBroe Jan 12 '15 at 23:16
  • http://stackoverflow.com/questions/14791619/detect-ie10-compatibility-mode – Ron Gilchrist Jan 13 '15 at 00:38
  • May I ask why you want to know if the user is in compat mode? – Sampson Jan 13 '15 at 05:01
  • I just doing some testing. In previous IE versions, there would be a "broken page" icon in the url bar. but in IE 11, there's no way to tell whether if the page is using compat view on or not. – slee Jan 13 '15 at 15:10
  • @slee Have you checked `document.documentMode`? – Sampson Jan 13 '15 at 19:05

7 Answers7

25

SOLVED

While searching for an answer to this question myself, I found this solution from Nenad Bulatovic in another thread but his response wasn't marked as the correct answer. I tested this out in IE11 and downgrading to IE5 and found that it works for IE7-IE11, which is great. I wanted to share it here in case anyone else finds it useful.

iecheck.js

function trueOrFalse() {
    return true;
}

function IeVersion() {
    //Set defaults
    var value = {
        IsIE: false,
        TrueVersion: 0,
        ActingVersion: 0,
        CompatibilityMode: false
    };

    //Try to find the Trident version number
    var trident = navigator.userAgent.match(/Trident\/(\d+)/);
    if (trident) {
        value.IsIE = true;
        //Convert from the Trident version number to the IE version number
        value.TrueVersion = parseInt(trident[1], 10) + 4;
    }

    //Try to find the MSIE number
    var msie = navigator.userAgent.match(/MSIE (\d+)/);
    if (msie) {
        value.IsIE = true;
        //Find the IE version number from the user agent string
        value.ActingVersion = parseInt(msie[1]);
    } else {
        //Must be IE 11 in "edge" mode
        value.ActingVersion = value.TrueVersion;
    }

    //If we have both a Trident and MSIE version number, see if they're different
    if (value.IsIE && value.TrueVersion > 0 && value.ActingVersion > 0) {
        //In compatibility mode if the trident number doesn't match up with the MSIE number
        value.CompatibilityMode = value.TrueVersion != value.ActingVersion;
    }
    return value;
}

iecheck.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Testing IE Compatibility Mode</title>
    <script src="iecheck.js" type="text/javascript"></script>
</head>
<body>
<div id="results">Results: </div>
</br>
<script type="text/javascript">

var ie = IeVersion();

document.write("IsIE: " + ie.IsIE + "</br>");
document.write("TrueVersion: " + ie.TrueVersion + "</br>");
document.write("ActingVersion: " + ie.ActingVersion + "</br>");
document.write("CompatibilityMode: " + ie.CompatibilityMode + "</br>");

</script>
</body>
</html>

source: Detect IE10 compatibility mode

Community
  • 1
  • 1
jaegs
  • 469
  • 5
  • 13
  • 1
    `value.CompatibilityMode = value.TrueVersion != value.ActingVersion;` Compatibility mode = quirks. This does not detect quirks. It only tells that IE is running a lower version emulation, which itself can be quirks or standards mode. – Neolisk Jan 18 '17 at 21:37
  • Why does the JavaScript here contain the same things as the contents of the answer posted almost a year before? While I admit it is better to have the code posted instead of having a link to git repository, it causes confusion as it seems like there are two possible solutions. – JRSofty Apr 24 '17 at 12:50
8

I wrote a JavaScript function, ie-truth, to do just this. How it works is that in IE 11 if compatibility mode is turned on, the User Agent string will contain the Trident version number for IE 11 (7.0) as well as the MSIE version number for an older version of IE (such as 7.0 for IE 7). This also applies to compatibility mode in older versions of IE.

Gavin.Paolucci.Kleinow
  • 863
  • 8
  • 21
  • 3
    Yes, this seems to be partly correct, *however* I've discovered that it's possible to force "Compatibility Mode" for a domain via IE 11 settings and then have web server declare `X-UA-Compatible: IE=edge`. This puts it in a weird semi-compatibility mode that can break things (such as Google's Recaptcha). This particular case appears to be impossible to detect via the user-agent string. – Simon East Dec 07 '15 at 06:26
  • @SimonEast, I'm struggling to find a way to ensure that the Google captcha isn't broken for IE users without forcing the user to mess with their browser settings. I have an open question here and would be interested in any solutions you may have figured out. (http://stackoverflow.com/questions/42768017/unable-to-reliably-use-google-recaptcha-2-0-and-jquery-2-1-4-because-of-ie-compa) – Drew Mar 13 '17 at 15:55
7

Add this to web.config file and application will overwrite user's setting.

<configuration>
  ...
  <system.webServer>
    ...
    <httpProtocol>
        <customHeaders>
          <clear/>
          <add name="X-UA-Compatible" value="IE=8; IE=9; IE=EDGE" />
        </customHeaders>
    </httpProtocol>
    ...
  </system.webServer>
  ...
</configuration>

Place the "system.webServer" tag at the end of your web.config file just before the closing "configuration" tag. Additionally, you can add the X-UA-Compatible tag in IIS on your webserver by selecting your website and clicking on the HTTP Response Headers icon.

Bill
  • 9
  • 3
Kris Truyens
  • 71
  • 1
  • 1
1

I would recommend that one uses feature detection rather than indirectly querying the browser version. So, for example, if you require the HTML 5 history API feature, do something like:

if (window.history && window.history.pushState) {
    console.log('This is a SUPPORTED browser');
} else {
    console.log('NO! You require a browser that does X, please try installing ...');
}
geekdenz
  • 621
  • 1
  • 5
  • 8
0

Per the user agent article of the IE Compatibility Cookbook, there is a way you can tell that compat mode is enabled, but only when the user-agent string cooperates.

Specifically, if the browser token says MSIE 7.0 and the Trident token says Trident/7.0, that's a pretty clear indication. Still, the changes to the UA string since IE11 RTM show that you cannot--and should not--rely on it as a predicable resource in future versions.

To learn more about the individual tokens, see the Understanding user-agent strings topic. (It's not entirely current, but what is there seems relevant to your interests.)

Hope this helps...

-- Lance

Lance Leonard
  • 3,255
  • 3
  • 14
  • 15
0

A reliable solution you can edit that works for Internet Explorer 8 to 11 (needs extra code to support < IE8).

Nasty side-effects (only if IE < 11 or documentMode < 11 -- ouch):

  • This will cause problems with //@ sourceMappingURL=xx.js (e.g. in jQuery < 1.11, or other libraries that haven't updated to the newer //# format).
  • Apparently @cc_on dramatically slows down js evaluation (re Paul Irish who knows his stuff).

The basic reason it works is that:

var ieRealVersion = Function('return /*@cc_on @_jscript_version@*/;')();

returns the real version of IE regardless of compatibility mode. Notes:

  • ieRealVersion is undefined for IE11 in IE11 mode, but document.documentMode == 11 in that case.
  • ieRealVersion is 5.8 for IE8.
  • ieRealVersion is 5.7 for IE7, and also 5.7 for IE6 SP3. However documentMode is undefined so you need extra code to detect actual browser (fairly trivial, but I don't support IE6/7 any more, so I haven't bothered to code that).
  • This is a reliable way to sniff for Internet Explorer 6-10 that I have used for many years with no problems (but which has caused problems for others due to @cc_on).
robocat
  • 4,857
  • 40
  • 62
0

A simple solution, try it in the console:

if (typeof(window.getSelection) == "undefined") {
   alert("Unsupported browser!");
} else {
   alert("Supported browser");
}

Will detect any IE less than IE9 (including compatibility view). Would also detect Chrome 4-14 according to caniuse.

IE 6-8: Supports selection events, but not window.getSelection() Ref: https://caniuse.com/#feat=selection-api

user1775054
  • 13
  • 4