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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
简单实现js轮播图效果
Jul 14 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 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
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php正则表达式(regar expression)
2011/09/10 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
python导入坐标点的具体操作
2019/05/10 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
Pycharm修改python路径过程图解
2020/05/22 Python
浅谈python锁与死锁问题
2020/08/14 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
学习雷锋月活动总结
2014/07/03 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
Python中22个万用公式的小结
2021/07/21 Python
mysql如何查询连续记录
2022/05/11 MySQL