在 IE8 中使用 JavaScript 将 CSS 附加到正文时出现未知运行时错误

Question

我在 Internet Explorer 8 中将 CSS @import 规则插入我的 <body> 时遇到问题。我这样做是为了推迟非关键 CSS.

当我运行以下代码时，我在第 6 行 (ref_obj.innerHTML = ...) 上得到一个 "Unknown Runtime Error":

var css_path_str = "my.css",
el_body = document.getElementsByTagName('body')[0],
ref_obj = document.createElement("style");

ref_obj.type = "text/css";
ref_obj.innerHTML = "@import url(\""+css_path_1_str+"\");";

el_body.appendChild(ref_obj);

正如您可能猜到的那样，代码在 Chrome 和 Firefox 上运行没有任何问题。

在 SO 上进行搜索后，我偶然发现了这个 post - Why is document.getElementById('tableId').innerHTML not working in IE8? - 它说 innerHTML for STYLE [和其他一些元素] 在 IE 上是只读的。

关于如何编辑我的代码以解决这些限制的任何想法？

注意：仅纯香草 JavaScript。

编辑:

问题已解决，但为了完整起见，这里是应该可以工作的代码（跨浏览器）。

var css_path_str = "my.css",
el_body = document.getElementsByTagName('body')[0],
ref_obj = document.createElement("style");
ref_obj.type = "text/css";

el_body.appendChild(ref_obj);

if(ref_obj.styleSheet)
{
    //IE
    ref_obj.styleSheet.cssText = "@import url(\""+css_path_str+"\");";
}
else
{
    //Other Browsers
    var ref_obj_text_node_obj = document.createTextNode("@import url(\""+css_path_str+"\");");
    ref_obj.appendChild(ref_obj_text_node_obj);
}

Answer 1

让 IE 满意的方法是在将节点插入 DOM:

后使用节点的 styleSheet.cssText 属性

var css_path_str = "my.css",
el_body = document.getElementsByTagName('body')[0],
ref_obj = document.createElement("style");
ref_obj.type = "text/css";

el_body.appendChild(ref_obj);
ref_obj.styleSheet.cssText = "@import url(\""+css_path_str+"\");";

在 IE8 中使用 JavaScript 将 CSS 附加到正文时出现未知运行时错误

Unknown Runtime Error when using JavaScript to append CSS to Body in IE8

javascript

internet-explorer-8