脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → IE8动态加载CSS的解决方法

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

 更新时间：2014年06月17日 09:27:41   投稿：junjie  
这篇文章主要介绍了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接口的人

您可能感兴趣的文章:

相关文章

  • webpack下实现动态引入文件方法

    webpack下实现动态引入文件方法

    下面小编就为大家分享一篇webpack下实现动态引入文件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 微信小程序使用onreachBottom实现页面触底加载及分页效果

    微信小程序使用onreachBottom实现页面触底加载及分页效果

    小程序还没有使用pc端的那种分页格式,下面这篇文章主要给大家介绍了关于微信小程序使用onreachBottom实现页面触底加载及分页效果的相关资料,需要的朋友可以参考下
    2022-10-10
  • javascript避免数字计算精度误差的方法详解

    javascript避免数字计算精度误差的方法详解

    本篇文章主要是对javascript避免数字计算精度误差的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • 使用 Jest 和 Supertest 进行接口端点测试实例详解

    使用 Jest 和 Supertest 进行接口端点测试实例详解

    这篇文章主要介绍了使用 Jest 和 Supertest 进行接口端点测试,结合实例形式详细分析了使用 Jest 和 Supertest 进行接口端点测试具体原理、操作技巧与相关注意事项,需要的朋友可以参考下
    2020-04-04
  • JS深度拷贝Object Array实例分析

    JS深度拷贝Object Array实例分析

    这篇文章主要介绍了JS深度拷贝Object Array,结合实例形式分析了JavaScript深度拷贝的原理,需要的朋友可以参考下
    2016-03-03
  • 一文详解PDF.js的使用及其跨域问题解决

    一文详解PDF.js的使用及其跨域问题解决

    PDF.js是一个JavaScript库,可在浏览器中无插件显示PDF,提供缩放、翻页、文本搜索等功能,下面这篇文章主要介绍了PDF.js的使用及其跨域问题解决的相关资料,需要的朋友可以参考下
    2025-04-04
  • JavaScript报错：Uncaught ReferenceError: XYZ is not defined的解决方法

    JavaScript报错：Uncaught ReferenceError: XYZ is&

    在 JavaScript 编程中,“Uncaught ReferenceError: XYZ is not defined” 是一种常见的错误,这种错误通常发生在试图使用一个未声明的变量或标识符时,故本文给大家介绍了JavaScript报错：Uncaught ReferenceError: XYZ is not defined的解决方法,需要的朋友可以参考下
    2024-07-07
  • JS实现的跨浏览器解析XML文件实例

    JS实现的跨浏览器解析XML文件实例

    这篇文章主要介绍了JS实现的跨浏览器解析XML文件的方法,结合实例形式分析了javascript基于ActiveXObject操作xml文件的加载与解析相关技巧,需要的朋友可以参考下
    2016-06-06
  • javascript:void(0)用法及常见问题解析

    javascript:void(0)用法及常见问题解析

    javascript:void(0) 是一个常见的用法,通常用于创建一个空操作或者防止页面跳转,本文主要介绍了javascript:void(0)用法及常见问题解析,具有一定的参考价值,感兴趣的可以了解一下
    2024-06-06
  • flash调用js中的方法,让js传递变量给flash的办法及思路

    flash调用js中的方法,让js传递变量给flash的办法及思路

    前几天发表了 将FlashVars写在JS函数中，实现与后台的实时变量更新，但是仅支持 IE，随后与 Luckyer 进行了交流，发现用 SetVariable 可以很方便的实现多浏览器兼容。举例如下。
    2013-08-08

最新评论