javascript - 创建Style Node，添加innerHTML，添加到DOM，IE头痛

Question

我有一个分为两部分的问题。

一、场景:

由于我们在移动浏览器对 NOSCRIPT 的支持方面遇到了一些奇怪的问题，我的任务是想出一个“检测”JS 的替代解决方案。解决逻辑是页面上有两个DIV。一个是错误提示您没有默认显示的 JS 和他的。如果有 JS，那么我们想在 HEAD 中添加一个新的 STYLE block ，以覆盖之前的 CSS 并隐藏错误并显示内容。

示例 HTML:

<div id="div1">div 1 (should be shown if JS enabled)</div>
<div id="div2">div 2 (should be hidden if JS enabled)</div>

这是我开始使用的 JS:

  var styleNode = document.createElement('style');
  styleNode.setAttribute("type", "text/css");
  styleNode.innerHTML = "#div1 {display: block;} #div2 {display: none;}";
  headTag.appendChild(styleNode);

但是，我遇到了问题。如果您尝试将 innerHTML 插入到已创建的元素中，然后再将其放入 DOM 中，一些谷歌搜索会导致 IE 可能遇到的安全问题的描述:

http://karma.nucleuscms.org/item/101

所以，我修改了脚本:

  var styleNode = document.createElement('style');
  styleNode.setAttribute("type", "text/css");
  var headTag = document.getElementsByTagName("head")[0];
  headTag.appendChild(styleNode);
  var aStyleTags = headTag.getElementsByTagName("style");
  var justAddedStyleTag = aStyleTags[aStyleTags.length-1];
  justAddedStyleTag.innerHTML = "#div1 {display: block;} #div2 {display: none;}";

问题 1:这是 IE 问题的有效解决方法吗？有没有更有效的解决方案？

问题2:调整后脚本在IE下还是不行。它在 Firefox 中运行良好，但在 IE 7 中出现“未知运行时错误”。

我在 JSBIN 上有这段代码的示例:

http://jsbin.com/ucesi4/4

有人知道 IE 是怎么回事吗？

更新:

我通过谷歌偶然发现了这个链接。请注意最后一条评论:

http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

That said, you really should put all style rules in the HEAD for strict compliance with XHTML. Doing this can also be a little tricky because you cannot use innerHTML to inject into the HEAD or STYLE element directly. (Both of these tags are READ ONLY.)

哎呀!真的？ FireFox 是否过于宽容？或者这只是一个非常奇怪的 IE 怪癖？

更新 2:

关于我们在这里试图解决的问题的更多背景知识。我们正在处理移动设备和一些过时的设备 a) 不支持 NOSCRIPT 和 b) JS 引擎速度慢。

由于他们不支持 NOSCRIPT，我们默认显示错误，然后通过 JS 隐藏错误(如果有)，并向他们显示正确的内容。由于这些上的 JS 引擎速度较慢，人们会看到 DIV 显示/隐藏的“闪烁”。这是处理该问题的建议解决方案，因为它甚至会在呈现 DIV 之前加载 CSS。

由于它似乎无效，解决方案将是在这些旧设备上，我们将使用此方法(因为它似乎有效，即使不在 IE 中)，然后所有其他适当的浏览器将按照建议执行。 ..我们将在 DOM 中加载每个 DIV 后通过内联 JS 更新 DISPLAY CSS 属性。

综上所述，我仍然很好奇这个问题是否是 IE 错误，或者 IE 是否通过将 STYLE 设置为只读元素而真正遵守了正确的标准。

Answer 1

在 IE 中你可以使用 style.styleSheet.cssText:

var style = document.createElement('style');
style.type = 'text/css';

if (style.styleSheet) { // IE
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);

在这里试试这个:http://jsfiddle.net/QqF77/

查看此问题的答案:How to create a <style> tag with Javascript