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 相关文章推荐
jquery获得option的值和对option进行操作
Dec 13 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
jQuery实现高级检索功能
May 28 jQuery
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 开源框架22个简单简介
2009/08/24 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
js表单登陆验证示例
2016/10/19 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
Python的lambda匿名函数的简单介绍
2013/04/25 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Python多线程获取返回值代码实例
2020/02/17 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
python 利用toapi库自动生成api
2020/10/19 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
static关键字的用法
2013/10/07 面试题
英语专业个人求职自荐信
2013/09/21 职场文书
工作失职检讨书范文
2014/01/16 职场文书
班主任寄语大全
2014/04/04 职场文书
2014年党支部学习材料
2014/05/19 职场文书
读书笔记怎么写
2015/07/01 职场文书
Spring中bean集合注入的方法详解
2022/07/07 Java/Android