internet explorer 8 - Unknown Runtime Error when using JavaScript to append CSS to Body in IE8 -
i'm having issue inserting css @import rule <body>
in internet explorer 8. i'm doing way defer non-critical css.
when run following code "unknown runtime error" on line 6 (ref_obj.innerhtml = ...
):
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);
as can guess, code works on chrome , firefox without issue.
after doing search here on so, stumbled on post - why document.getelementbyid('tableid').innerhtml not working in ie8? - says innerhtml
style
[and few other elements] on ie read-only.
any ideas how can edit code work around these limitations?
note: pure vanilla javascript.
edit:
problem solved, completeness, here code should work (cross-browser).
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); }
what can make ie happy use stylesheet.csstext
property of node after you've inserted dom:
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+"\");";
Comments
Post a Comment