创建样式节点，添加innerHTML，添加到DOM和IE头痛 [英] Creating Style Node, adding innerHTML, add to DOM, and IE headaches
问题描述
我有两个问题。
首先，情景：
由于我们在移动浏览器方面遇到了一些奇怪的问题支持NOSCRIPT，我的任务是提出另一种'检测'JS的解决方案。解决方案逻辑是在页面上有两个DIV。一个是错误，表明你没有JS和他默认显示。如果有一个JS，我们想要向HEAD添加一个新的STYLE块，它会覆盖以前的CSS并隐藏错误，而是显示内容。
Due to some bizarre issues we've run into in regards to mobile browser support for NOSCRIPT, I'm tasked with coming up with an alternative solution to 'detect' JS. The solution logic is to have two DIVs on the page. One is an error stating you do not have JS and his shown by default. If one has JS, we then want to add a new STYLE block to the HEAD that over-rides the previous CSS and hides the error and instead shows the content.
示例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中：
But, I was having problems. Some googling resulting in this description of a security issue that IE can have if you try to insert innerHTML into a created element before placing it in the 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问题的有效解决方法吗？是否有更有效的解决方案？
question 1: is that a valid workaround for the IE issue? Is there a more efficient solution?
问题2 ：即使进行了调整，脚本仍然无法在IE中运行。它在Firefox中工作正常，但在IE 7中我得到一个未知的运行时错误。
question 2: even with the adjustment, the script still does not work in IE. It works fine in Firefox, but in IE 7 I get an "unknown runtime error".
我在JSBIN上有这个代码的示例：
I have a sample of this code up on JSBIN:
任何人都知道IE正在发生什么？
Anyone know what's going on with IE?
更新：
我通过谷歌偶然发现了这个链接。请注意最后的评论：
I stumbled upon this link via google. Note the last comment:
http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx
那就是说，你真的应该把所有
样式规则放在HEAD中，以便严格遵守
XHTML。这样做可以
也有点棘手，因为你
不能使用innerHTML直接注入
的HEAD或STYLE元素。
（这两个标签都是只读的。）
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.)
Eep！真正？ FireFox是否过于原谅？或者这只是一个非常奇怪的IE怪癖？
Eep! True? Is FireFox just being overly forgiving? Or is this just a very odd IE quirk?
更新2：
关于我们的更多背景知识我试图在这里解决。我们正在处理移动设备和一些过时的设备a）不支持NOSCRIPT和b）缓慢的JS引擎。
A bit more background on what we're trying to solve here. We're dealing with mobile devices and some of the antiquated devices a) don't support NOSCRIPT and b) have slow JS engines.
因为它们不支持NOSCRIPT ，我们默认显示错误，然后通过JS隐藏它，如果他们有，并向他们提供适当的内容。由于这些JS引擎很慢，人们会看到DIV显示/隐藏的闪烁。这是处理它的建议解决方案，因为它会在DIV甚至呈现之前加载CSS。
Since they don't support NOSCRIPT, we are by default showing an error, then hiding it via JS if they have it, and presenting them with the proper content. Because of the slow JS engines on these, people see the 'flicker' of the DIV's showing/hiding. This was the proposed solution to handle that, as it would load the CSS before the DIVs were even rendered.
由于它似乎无效，解决方案将是这些旧设备，我们将使用这种方法（因为它似乎工作，即使不在IE中），然后所有其他适当的浏览器将按照建议做...我们将在每次之后通过内联JS更新DISPLAY CSS属性DIV加载在DOM中。
Since it appears to be invalid, the solution will be that on these old devices, we'll use this method (as it seems to work, even if not in IE) and then all other proper browsers will do as suggested...we'll just update the DISPLAY CSS property via inline JS after each DIV is loaded in the DOM.
所有这一切，我仍然很好奇这个问题是否是一个IE错误，或者IE是否实际上遵守了正确的标准，使STYLE成为一个阅读唯一的元素。
All that said, I'm still curious as to whether this issue is an IE bug, or if IE is actually adhering to the proper standards by making STYLE a read-only element.
推荐答案
在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/
请参阅此问题的答案：如何创建< style>标记为Javascript
See the answer on this question: How to create a <style> tag with Javascript
这篇关于创建样式节点，添加innerHTML，添加到DOM和IE头痛的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
