相关疑难解决方法(0)

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

我有两个问题.

首先,场景:

由于我们在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>

Run Code Online (Sandbox Code Playgroud)

这是我开始的JS:

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

Run Code Online (Sandbox Code Playgroud)

但是,我遇到了问题.一些谷歌搜索导致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;}";

Run Code Online (Sandbox Code Playgroud)

问题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