使用JavaScript添加<meta http-equiv="X-UA-Compatible" content="IE=9" />

3
我遇到了一个奇怪的问题,与IE 10有关。许多在IE 8、9、Chrome、Firefox和Safari上正常工作的jQuery脚本,在IE 10上出现故障。这个问题只有当一些用户切换到IE 10时才会暴露出来。
我发现最简单的解决方案是添加:
<meta http-equiv="X-UA-Compatible" content="IE=9" /> 

<head></head> 中。

问题是网站有很多页面,大多数页面没有继承的母版页。 那么是否有办法通过javascript添加呢?因为我们在所有网页中都有一个常见的引用js。


7
你可以轻松地将meta添加到head中,但这是没有用的,只有在加载页面时才有影响。 - Teemu
1
与上述相同,JS 无法帮助您。您最好的选择是在 IIS 服务器上设置 Http 标头。 - jfrej
@Teemu,问题实际上已经通过这个得到解决,因为页面在IE 9模式下呈现,如果是IE 9或10,否则在客户端使用较低版本的IE。 - Pranav Singh
@jfrej,我同意,但这可以在虚拟目录级别完成吗?因为IIS上有多个网站,我不想更改它们的设置。 - Pranav Singh
5个回答

13

不,JavaScript没有办法改变浏览器的渲染模式。至少从页面加载时开始,渲染模式就已经被固定了,因此无法通过JS在页面内部更改它。

一个替代方案是将X-UA-Compatible标记作为HTTP头添加。这样可以在整个站点上设置它,而不需要进行任何HTML更改。

您提到正在使用IIS。 此页面应该能帮助您为您的站点配置

然而,真正的解决方案总是修复网站以使其在IE10中正常工作。这很可能是最好的解决方案,因为IE10实际上非常擅长遵循标准;如果您有一些在IE8和IE9中工作但在IE10中不工作的东西,那么几乎可以确定这实际上是您页面中的错误,而不是IE10中的问题。

反过来,这意味着即使它在其他浏览器中今天能够工作,也很可能存在您代码中的错误,会在未来版本的其他浏览器中出现问题。

使用IE的兼容性模式的另一个问题是它并不是与旧IE版本完全一样的精确副本。这尤其适用于IE10的兼容性模式,因为有些旧功能已经完全从IE10中删除,因此在兼容性模式下也不可用。这意味着IE8和IE9可能会正常工作,但IE9兼容模式下的IE10可能不起作用。具体问题取决于实际情况,但您需要像在真正的IE10模式下一样彻底测试它。

然后就有一个问题,你要如何处理网站未来的发展。那IE11及以后的版本呢?兼容模式会移除IE可能具有的新特性,因此如果坚持使用IE9模式,就会阻止您使用文本阴影或CSS过渡等功能。最终您还是需要使用这些特性,所以某个时候需要修复该网站;为什么不现在呢?


确实我们需要修复IE 10的问题,但在此之前我们不能让它一直处于损坏状态。我需要的是在网站配置文件中进行更改,而不是在Web服务器配置中进行更改。这可能吗? - Pranav Singh
@Pranav - 我已经添加了一个链接到答案,它应该可以帮助你配置IIS。(该链接还包含进一步到MSDN的链接,如果需要的话) - Spudley

6
感谢大家的回复和帮助。 我需要的是在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>

<system.webServer>部分。

我希望用JavaScript来实现,但在web.config中添加这个肯定是更好的解决方案。 - Pranav Singh

3

JavaScript在页面加载后运行,这意味着您将无法在服务器将元响应发送到客户端后修改它。如果没有常见的标头,更容易解决IE 10的问题。


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

但正如 Teemu 暗示的那样,它很可能不会产生任何效果。


这是我正在寻找的东西。让我检查一下它是否有效。 - Pranav Singh
2
如果将@Pranav <meta http-equiv="X-UA-Compatible" content="IE=9" /> 放置在head的错误位置,则即使在页面加载期间也没有影响。 该 meta 应该在执行/解析任何可能影响呈现或JavaScript的内容之前,这意味着它必须放在所有 linkstylescript 元素之前,否则它就是完全无用的。如果您尝试使用脚本设置它,显然会出现 "forbidden" 元素在 meta 之前。 - Teemu
@Cobra_Fast,感谢您的回复,但正如上面的评论所述,“它必须放置在所有链接、样式或脚本元素之前,否则它完全没有用处”。 - Pranav Singh
1
@Pranav 看一下 DOM 节点的 insertBefore() 方法。但我仍然怀疑它是否对你有用。 - Cobra_Fast

1

很难从问题中弄清楚到底是哪里出了问题?你能告诉我哪段JavaScript代码出了问题吗?

无论如何,一种解决方案可能是更改文档模式,就像你上面所述的那样。另一种解决方案可能是更改浏览器的JavaScript版本(如果问题是由于不兼容的JavaScript引起的)。

您可以通过向asp.net应用程序中的App_Browser文件夹添加浏览器配置文件来更改浏览器的JavaScript版本。或者,可以添加此nu-get包并进行修改以自动完成。

install-package App_BrowsersUpdate

https://nuget.org/packages/App_BrowsersUpdate


1
在大多数情况下,错误是“JavaScript运行时错误:'JSON'未定义”。让我检查一下是否有效。 - Pranav Singh
"window.JSON is undefined" 是一种常见的错误,它有多种解决方案之一是包含 "JSON2.js" 文件。 - Ammar Hasan
1
您可以使用以下命令从NuGet添加文件:[ Install-Package json2 ]安装后,请在所有脚本引用之前添加对此文件的脚本引用。 - Ammar Hasan
作为开发人员,您不应该期望客户升级软件,因为您不支持它。您应该提供解决方案,以防止问题出现,例如使用 try catch - Bloafer
谢谢@Ammar Hasan,添加json-2.js解决了相关问题,但核心问题仍然存在。 - Pranav Singh
你的核心问题是什么?能否把 JavaScript 错误复制在这里? - Ammar Hasan

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接