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 相关文章推荐
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
vue分页插件的使用方法
Dec 25 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
js 学习笔记(三)
2009/12/29 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
快速使用node.js进行web开发详解
2017/04/26 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
django初始化数据库的实例
2018/05/27 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
为什么说python适合写爬虫
2020/06/11 Python
Python实现画图软件功能方法详解
2020/07/28 Python
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
艺术学院毕业生自我评价
2014/03/02 职场文书
党员公开承诺书
2014/03/25 职场文书
学校团代会开幕词
2016/03/04 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书