快捷導(dǎo)航

IE8中使用javascript動(dòng)態(tài)加載CSS的解決方法

更新時(shí)間：2014年06月17日 09:27:41 投稿：junjie

這篇文章主要介紹了IE8中使用javascript動(dòng)態(tài)加載CSS的解決方法,此方法也不是很完美,需要的朋友參考下吧

眾所周知做前端開(kāi)發(fā)的都恨不得踹IE開(kāi)發(fā)者幾腳，IE開(kāi)發(fā)者名聲之差不低于GFW開(kāi)發(fā)者，昧著良心搞壞市場(chǎng)，人人得而誅之，但是在中國(guó)這些地方市場(chǎng)占有率擺在那里，沒(méi)辦法只能向現(xiàn)實(shí)低頭。

最近我們產(chǎn)品需要在瀏覽器里動(dòng)態(tài)載入一段CSS，以前的代碼是直接用的:

復(fù)制代碼代碼如下:

var bubbleCss = document.createElement('style');
bubbleCss.type = 'text/css';
bubbleCss.innerHTML = blc_conf.bubbleStyle;
document.getElementsByTagName('head')[0].appendChild(bubbleCss);

不過(guò)這個(gè)只有IE9支持，在IE8下會(huì)出問(wèn)題，一直也沒(méi)注意到這塊，直到最近重構(gòu)后做完整測(cè)試的時(shí)候才發(fā)現(xiàn)。
網(wǎng)上搜到一個(gè)技巧，試過(guò)，可行，但是有一些問(wèn)題

復(fù)制代碼代碼如下:

window.bc_bubble_css = blc_conf.bubbleStyle;
document.createStyleSheet("javascript:bc_bubble_css");

這里可以創(chuàng)建由變量bc_bubble_css定義的樣式，不過(guò)由于HTML5逐漸普及，我們的css里也混入了一些css3 selector，使用這個(gè)方法會(huì)導(dǎo)致IE8的parser解析到css3 selector的時(shí)候拋異常并停止解析后續(xù)css，這讓css只加載了一半，網(wǎng)上搜到的辦法都是用StyleSheet類(lèi)型的addRule來(lái)增加，不過(guò)這個(gè)需要自己指定css2 selector以及樣式，
因此需要從CSS中拆開(kāi)單個(gè)的規(guī)則，然后依次調(diào)用addRule，例子：

復(fù)制代碼代碼如下:

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) {
        }
    }
}

開(kāi)頭有兩個(gè)替換，分別去掉注視和部分css3 的selector，不過(guò)依然有漏網(wǎng)的selector，需要在后面try catch 捉一下。

另外再次鄙視設(shè)計(jì)IE接口的人

您可能感興趣的文章: