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

众所周知做前端开发的都恨不得踹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接口的人

赞 (0)

相关推荐

  • 动态加载css方法实现和深入解析

    一.方法引用来源和应用 此动态加载css方法 loadCss,剥离自Sea.js,并做了进一步的优化(优化代码后续会进行分析). 因为公司项目需要用到懒加载来提高网站加载速度,所以将非首屏渲染必需的css文件进行动态加载操作. 二.优化后的完整代码 /* * @function 动态加载css文件 * @param {string} options.url -- css资源路径 * @param {function} options.callback -- 加载后回调函数 * @param {s

  • javascript实现动态加载CSS

    复制代码 代码如下: <script type="text/javascript">             function addStyle(stylePath) {                 var container = document.getElementsByTagName("head")[0];                 var addStyle = document.createElement("link"

  • jQuery动态加载css文件实现方法

    有时我们可能会需要使用 jQuery 来加载一个外部的 css 文件,如在切换页面布局时.思路是创建一个 link 元素,并将它添加到 标记中即可,下边首先看看怎么使用 jQuery 来实现. 下边是我喜欢的写法: $("<link>") .attr({ rel: "stylesheet", type: "text/css", href: "site.css" }) .appendTo("head&quo

  • 如何实现JavaScript动态加载CSS和JS文件

    项目中需要用到动态加载CSS 文件,整理了一下,顺便融合了动态加载JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var link =

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

    众所周知做前端开发的都恨不得踹IE开发者几脚,IE开发者名声之差不低于GFW开发者,昧着良心搞坏市场,人人得而诛之,但是在中国这些地方市场占有率摆在那里,没办法只能向现实低头. 最近我们产品需要在浏览器里动态载入一段CSS,以前的代码是直接用的: 复制代码 代码如下: var bubbleCss = document.createElement('style');bubbleCss.type = 'text/css';bubbleCss.innerHTML = blc_conf.bubbleSt

  • JavaScript动态加载样式表的方法

    本文实例讲述了JavaScript动态加载样式表的方法.分享给大家供大家参考.具体如下: 如果需要更换皮肤,我们可以通过JS代码动态加载皮肤的样式表,下面的代码就可以做到,非常简单,你只需要把这段代码做成函数动态调用即可. var el = document.createElement('link'); el.rel = 'stylesheet'; el.type = 'text/css'; el.href = 'http://www.jb51.net/...' + 'styles.css';

  • iscroll动态加载数据完美解决方法

    本文实例为大家分享了iscroll动态加载数据的具体代码,供大家参考,具体内容如下 <div id="wrapper" class="margin-b90"> <div id="scroller"> <div id="pullDown"> <span class="pullDownLabel" style="text-align: center;"

  • javascript 动态加载 css 方法总结

    1. 用在外部CSS文件中加载必须的文件 @importurl(style.css); //只能用在CSS文件中或者style标签中 2. 简单的在页面中加载一个外部CSS文件 document.createStyleSheet(cssFile); 2. 用createElement方法创建CSS的Link标签 varhead=document.getElementsByTagName('HEAD').item(0); varstyle=document.createElement('link'

  • 使用javaScript动态加载Js文件和Css文件

    JS动态加载CSS 在可换主题的界面中具有很重要的意义,用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式,下面详细说明. 希望下面的方法对你有帮助. (1)使用JavaScript动态加载Js文件 /*JavaScript动态加载Js文件*/ var scriptNode = document.createElement('script'); scriptNode.src = 'proxy.js?t='+new Date().getTime();/*附带时间参数,防止缓存*/ documen

  • javascript动态加载三

    之前两篇都介绍了,通过动态加载JS文件或者说JS模块,是怎么一步一步实现. 首先是通过同步策略来实现模块加载与回调函数之间进行分离,接着是通过异步策略来实现模块加载与回调函数之间进行分离. 这一篇,主要是为了说说怎么优化异步策略,并且实现了随意加载(非任意顺序加载模块),页面Ready之后加载文件.先接一下上一篇遗留下来的问题 1.页面Ready之后进行加载 2.随意添加模块 进行加载 看第一个问题,这个问题其实还是比较简单的,主要是监听页面的DOMContentLoaded事件,这里就不多讲解

  • javascript动态加载二

    在上一篇javascript动态加载中,提到了使用同步加载策略这一个方式来实现如 复制代码 代码如下: Using("jquery"); Using("User"); $("#ID").click(function(){ var user = new User(); user.name = "xx"; user.show(); }); 由于JS是单线程的,所以同步策略带来的坏处不少,比如阻止之后的代码运行.造成浏览器假死等问题

  • JavaScript动态加载重复绑定问题

    JavaScript动态加载重复绑定问题

    前言 在添加一条数据时,使用动态加载显示在界面,后来发现一个严重的bug,拿我做的这个便签为例,当我添加一条数据后,然后点击删除的时候,提示是否删除,如下图: 但是当我添加两条以上的数据时,删除第几条就会提示几次是否确认删除. 经过排查,终于发现问题所在. 正文 当动态添加内容后,通常会写上添加的这些div中需要用到的事件,比如click事件/chang事件等.还拿我的删除事件为例,由于删除事件必须写在添加便签的事件下,所以当添加第一条数据时,绑定一次,添加第二条时,绑定一次,添加第n条数据时,

随机推荐