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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
跟我学习javascript的this关键字
May 28 Javascript
js实现异步循环实现代码
Feb 16 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 Javascript
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实现ODBC数据分页显示一例
2006/10/09 PHP
php过滤危险html代码
2008/08/18 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
使用js画图之画切线
2015/01/12 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
python模块之paramiko实例代码
2018/01/31 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
Python类装饰器实现方法详解
2018/12/21 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
如何用JQuery进行表单验证
2013/05/29 面试题
PyQt QMainWindow的使用示例
2021/03/24 Python
党的群众路线批评与自我批评范文
2014/10/16 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
停电放假通知
2015/04/14 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
简历自我评价范文
2019/04/24 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL