ie script1002_IE中的动态SCRIPT和STYLE元素

ie script1002

So you know how to add external scripts and styles, using the DOM, after the page is loaded. And what if you don't have external files, but have some style definitions and some JS code as text and you want it inserted and executed into a page.

因此，您知道在页面加载后如何使用DOM添加外部脚本和样式。 而且，如果您没有外部文件，但是有一些样式定义和一些JS代码作为文本，并且希望将其插入并执行到页面中，该怎么办。

DOM方式 (The DOM way)

"Ha! An easy one", you'd say and then go like:

你会说“哈！一个简单的人”，然后像这样：

var ss = document.createElement('script');
var scr = 'alert("bah");';
var tt = document.createTextNode(scr);
ss.appendChild(tt);
var hh = document.getElementsByTagName('head')[0];
hh.appendChild(ss);

"Ha!" in turn says IE, "No way!"

“哈！” 依次说IE，“没办法！”

脚本的IE方式 (The IE way for SCRIPT)

The above won't work in IE, but you can use the text property instead of creating a text node. Interestingly enough, this also works in Firefox.

上面的方法在IE中不起作用，但是您可以使用text属性而不是创建文本节点。 有趣的是，这在Firefox中也适用。

var ss = document.createElement('script');
var scr = 'alert("bah");';
ss.text = scr;
var hh = document.getElementsByTagName('head')[0];
hh.appendChild(ss);

IE的风格 (The IE way for STYLE)

STYLE, SCRIPT, what's the difference, they are merely elements of the DOM tree. For the normal browsers, yes, so creating a text node with the stylesheet body will work in Firefox. For IE, you need a workaround.

STYLE，SCRIPT，有什么区别，它们只是DOM树的元素。 对于普通浏览器，是的，因此使用样式表主体创建文本节点将在Firefox中起作用。 对于IE，您需要一种解决方法。

var ss1 = document.createElement('style');
var def = 'body {color: red;}';
ss1.setAttribute("type", "text/css");
ss1.styleSheet.cssText = def;
var hh1 = document.getElementsByTagName('head')[0];
hh1.appendChild(ss1);

Note that while in the SCRIPT case I took the liberty of skipping the type attribute, it's absolutely required here.

请注意，在SCRIPT情况下，我可以随意跳过type属性，但这在这里是绝对必要的。

So with a bit of object sniffing, we can get a cross-browser solution:

因此，通过一些对象嗅探，我们可以获得跨浏览器的解决方案：

var ss1 = document.createElement('style');
var def = 'body {color: red;}';
ss1.setAttribute("type", "text/css");
var hh1 = document.getElementsByTagName('head')[0];
hh1.appendChild(ss1);
if (ss1.styleSheet) {   // IE
    ss1.styleSheet.cssText = def;
} else {                // the world
    var tt1 = document.createTextNode(def);
    ss1.appendChild(tt1);
}

Update: note that it's important for IE that you append the style to the head *before* setting its content. Otherwise IE678 will *crash* is the css string contains an @import. Go figure!

更新：请注意，对于IE而言，重要的是，在设置样式内容之前，将样式附加到头部。 否则，IE678将*崩溃*，因为CSS字符串包含@import。 去搞清楚！

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/dynamic-script-and-style-elements-in-ie/

ie script1002