Adding 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 some users switch to IE 10.

Easiest solution I found to add

<meta http-equiv="X-UA-Compatible" content="IE=9" />

in <head></head>.

The problem is site has a lot of pages and most pages don't have inherited master page. So is there any way to add this through javascript, as we have a common referenced js in all webpages.

You can easily add the `meta` to the `head`, but it's useless, it has influence only when loading the page. — Teemu, Jun 06 '13 at 11:08
As above, JS won't help you. You're best option is to set the Http header on the server in IIS. — jfrej, Jun 06 '13 at 11:11
@Teemu, problem is actually resolved by this, since page is rendered in IE 9 mode, if its IE 9 or 10, else the lower version of IE on client side. — Pranav Singh, Jun 06 '13 at 11:23
@jfrej, I agree, but Is this can be done on virtual directory level? since there are multiple website on IIS and I don't wan't to play with their settings — Pranav Singh, Jun 06 '13 at 11:28

Spudley · Answer 1 · 2013-06-06T11:34:57.707

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?

Indeed we need to fix for IE 10, but until this happens we can't leave it broken. Any change in website config file instead of webserver config is what I needed. Is this possible ? — Pranav Singh, Jun 06 '13 at 11:33
@Pranav - I've added a link to the answer that should help you configure it for IIS. (that link also contains further links to MSDN if you need it) — Spudley, Jun 06 '13 at 11:35

score 6 · Accepted Answer · answered Jun 07 '13 at 06:53

6

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.

answered Jun 07 '13 at 06:53

Pranav Singh

17,079
30
77
104

I wish to do it by javascript, but adding this in web.config is certainly a better solution. – Pranav Singh Jun 07 '13 at 06:54

score 3 · Answer 3 · answered Jun 06 '13 at 11:11

3

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

answered Jun 06 '13 at 11:11

Bloafer

1,324
7
12

score 2 · Answer 4 · answered Jun 06 '13 at 11:12

2

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.

answered Jun 06 '13 at 11:12

Cobra_Fast

15,671
8
57
102

this is something I am looking for. Let me check if it works. – Pranav Singh Jun 06 '13 at 11:26
2

@Pranav `` has not influence even during page load if it is placed incorrectly to the `head`. The `meta` should be before executing/parsing anything, which could has influence to the rendering or JavaScript. This means it _must_ be placed before _all_ `link`, `style` or `script` elements, otherway it is totally useless. If you try to set it with a script, it's obvious, that a "forbidden" element preceeds the `meta`.... – Teemu Jun 06 '13 at 11:32
@Cobra_Fast, thanks for reply, but indeed as stated in above comment "it must be placed before all link, style or script elements, otherway it is totally useless" – Pranav Singh Jun 06 '13 at 11:52
1

@Pranav look at the `insertBefore()` method of DOM nodes. But I still doubt that it'll do anything for you. – Cobra_Fast Jun 06 '13 at 11:53

score 1 · Answer 5 · answered Jun 06 '13 at 11:39

1

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

answered Jun 06 '13 at 11:39

Ammar Hasan

2,436
16
22

1

In most places error is "JavaScript runtime error: 'JSON' is undefined". Let me check if it works. – Pranav Singh Jun 06 '13 at 11:50
**window.JSON is undefined** is a common error, there may be multiple solutions to it, one solution is to include **JSON2.js** file. – Ammar Hasan Jun 06 '13 at 13:14
1

you can add the file from nuget using the following command **[ Install-Package json2 ]** After install, add the script reference to this file before all script references – Ammar Hasan Jun 06 '13 at 13:16
You should not expect clients to upgrade software because you don't support it, as developers you should provide solutions that prevent the issues being shown using perhaps `try` `catch`s – Bloafer Jun 06 '13 at 13:27
Thanks @Ammar Hasan, adding json-2.js resolved issues related with that but core issue still exists. – Pranav Singh Jun 07 '13 at 06:14
what exactly is your core issue? can you please copy the javaScript error here? – Ammar Hasan Jun 07 '13 at 06:39

Adding using javascript

5 Answers5

Linked

Related