IE8中使用javascript动态加载CSS的解决方法
众所周知做前端开发的都恨不得踹IE开发者几脚,IE开发者名声之差不低于GFW开发者,昧着良心搞坏市场,人人得而诛之,但是在中国这些地方市场占有率摆在那里,没办法只能向现实低头。
最近我们产品需要在浏览器里动态载入一段CSS,以前的代码是直接用的:
varbubbleCss=document.createElement('style'); bubbleCss.type='text/css'; bubbleCss.innerHTML=blc_conf.bubbleStyle; document.getElementsByTagName('head')[0].appendChild(bubbleCss);
不过这个只有IE9支持,在IE8下会出问题,一直也没注意到这块,直到最近重构后做完整测试的时候才发现。
网上搜到一个技巧,试过,可行,但是有一些问题
window.bc_bubble_css=blc_conf.bubbleStyle; document.createStyleSheet("javascript:bc_bubble_css");
这里可以创建由变量bc_bubble_css定义的样式,不过由于HTML5逐渐普及,我们的css里也混入了一些css3selector,使用这个方法会导致IE8的parser解析到css3selector的时候抛异常并停止解析后续css,这让css只加载了一半,网上搜到的办法都是用StyleSheet类型的addRule来增加,不过这个需要自己指定css2selector以及样式,
因此需要从CSS中拆开单个的规则,然后依次调用addRule,例子:
vars=document.createStyleSheet(); varrules=blc_conf.bubbleStyle.replace(/\/\*[^\*]*\*\//g,"").replace(/@[^{]*\{/g,'').match(/[^\{\}]+\{[^\}]+\}/g); for(vari=0;i<rules.length;i++){ varm=rules[i].match(/(.*)\s*\{\s*(.*)\}/); if(m){ try{ s.addRule(m[1],m[2]); }catch(e){ } } }
开头有两个替换,分别去掉注视和部分css3的selector,不过依然有漏网的selector,需要在后面trycatch捉一下。
另外再次鄙视设计IE接口的人