IE8中使用javascript动态加载CSS的解决方法


Posted in Javascript onJune 17, 2014

众所周知做前端开发的都恨不得踹IE开发者几脚,IE开发者名声之差不低于GFW开发者,昧着良心搞坏市场,人人得而诛之,但是在中国这些地方市场占有率摆在那里,没办法只能向现实低头。

最近我们产品需要在浏览器里动态载入一段CSS,以前的代码是直接用的:

var bubbleCss = 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里也混入了一些css3 selector,使用这个方法会导致IE8的parser解析到css3 selector的时候抛异常并停止解析后续css,这让css只加载了一半,网上搜到的办法都是用StyleSheet类型的addRule来增加,不过这个需要自己指定css2 selector以及样式,
因此需要从CSS中拆开单个的规则,然后依次调用addRule,例子:
var s = document.createStyleSheet();
var rules = blc_conf.bubbleStyle.replace(/\/\*[^\*]*\*\//g, "").replace(/@[^{]*\{/g, '').match(/[^\{\}]+\{[^\}]+\}/g);
for(var i = 0; i < rules.length; i++) {
    var m = rules[i].match(/(.*)\s*\{\s*(.*)\}/);
    if(m) {
        try {
            s.addRule(m[1], m[2]);
        } catch(e) {
        }
    }
}

开头有两个替换,分别去掉注视和部分css3 的selector,不过依然有漏网的selector,需要在后面try catch 捉一下。

另外再次鄙视设计IE接口的人

Javascript 相关文章推荐
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
简单实现js拖拽效果
Jul 25 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
jQuery循环滚动新闻列表示例代码
Jun 17 #Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 #Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 #Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 #Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 #Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 #Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 #Javascript
You might like
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
Python pickle模块实现对象序列化
2019/11/22 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
python中添加模块导入路径的方法
2021/02/03 Python
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
单位单身证明范本
2014/01/11 职场文书
晚宴邀请函范文
2014/01/15 职场文书
银行员工辞职信范文
2014/01/20 职场文书
税务会计岗位职责
2014/02/18 职场文书
个人简历求职信范文
2015/03/20 职场文书
校运会加油稿大全
2015/07/22 职场文书
初中化学教学反思
2016/02/22 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server