创建样式节点,添加innerHTML,添加到DOM和IE头痛

Question

我有两个问题.

首先,场景:

由于我们在NOSCRIPT的移动浏览器支持方面遇到了一些奇怪的问题,我的任务是提出另一种"检测"JS的解决方案.解决方案逻辑是在页面上有两个DIV.一个是错误,表明你没有JS和他默认显示.如果有一个JS,我们想要向HEAD添加一个新的STYLE块,它会覆盖以前的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);

但是,我遇到了问题.一些谷歌搜索导致IE可以拥有的安全问题的描述,如果您尝试在将innerHTML放入创建的元​​素之前将其插入到DOM中:

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

也就是说,你真的应该把所有的样式规则都放在HEAD中,以便严格遵守XHTML.这样做也有点棘手,因为你不能使用innerHTML直接注入HEAD或STYLE元素.(这两个标签都是READ.).

EEP!真正？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/

请参阅此问题的答案:如何使用Javascript创建<style>标记