Adding <meta http-equiv=“X-UA-Compatible” content=“IE=9” /> using javascript

Question

I have a strange problem with IE 10. Many jQuery scripts that are working fine on IE 8, 9, Chrome, firefox and safari but broken on IE 10. Issue came into light only when s

Answer 1

JavaScript is run after the page load, this means you will not be able to modify the meta response from the server to the client afterwards. It might be easier to address the issues with IE 10 instead if there are no common headers

Answer 2

No, there is no way to do that in Javascript. At least, not in a way that would actually achieve anything -- the rendering mode is fixed when the page is loaded, so there's nothing you can do to change it in JS from within the page.

An alternative solution would be to add the X-UA-Compatible flag as an HTTP header. This would set it on all pages across your site without requiring any HTML changes.

You've mentioned that you're using IIS. This page should help you configure it for your site.

However, the real solution would always be to fix the site so that it works in IE10. This is likely to be the best solution for you because IE10 is actually pretty good at being standards compliant; if you've got something that works in IE8 and IE9 but not IE10, then it's near certain that it is actually something wrong in your page rather than anything wrong in IE10.

This in turn means that even if it works today in other browsers, there is likely to be a bug in your code that could break in future versions of other browsers.

The other problem with using IE's compatiblity mode is that it really isn't an accurate copy of the old IE version it's supposed to be compatible with. This is particularly the case with IE10's compatibility modes, because there are some old features that have been removed from IE10 completely, and which are therefore not available in compatiblity mode either. This means that IE8 and IE9 might work, but IE10 in IE9-compat mode might not work. It depends what the actual issue is, but you'll need to test it just as thoroughly in compat mode as you would in real IE10 mode.

And then there's the question of how you deal with the site going forward into the future. What about IE11 and beyond? Compat mode removes new features that IE might have, so by sticking with IE9 mode you'll be stopping yourself from being able to use features like text shadow or CSS transitions. You'll want to use those features eventually, so you will need to fix the site at some point; why not now?

Answer 3

var m = document.createElement("meta");
m.setAttribute("http-equiv", "X-UA-Compatible");
m.setAttribute("content", "IE=9");
document.getElementsByTagName("head")[0].appendChild(m);

But as Teemu hinted, it will most likely not show any effect.

Answer 4

It is hard to figure out (from the question) that what is actually being broken? Can you tell which JavaScript code is being broken?

Anyways, one solution may be changing the document mode, what you have stated above. Another solution may be changing the browser's JavaScript version (if the problem is due to in-compatible JavaScript).

You can change the browser's JavaScript version be adding a browser configuration file to App_Browser folder in you asp.net application. Or to do it automatically, add this nu-get package and modify it.

install-package App_BrowsersUpdate

https://nuget.org/packages/App_BrowsersUpdate

Answer 5

Thanks everyone for responses and help. What I was looking for was like adding below code in web.config:

        <httpProtocol>
            <customHeaders>
                <clear/>
                <!--This setting will make document mode to highest mode available we need have mode 8 and above-->
                <add name="X-UA-Compatible" value="IE=IE9"/>
            </customHeaders>
        </httpProtocol>

in <system.webServer> section.