IE8中使用javascript動態(tài)加載CSS的解決方法
眾所周知做前端開發(fā)的都恨不得踹IE開發(fā)者幾腳,IE開發(fā)者名聲之差不低于GFW開發(fā)者,昧著良心搞壞市場,人人得而誅之,但是在中國這些地方市場占有率擺在那里,沒辦法只能向現(xiàn)實低頭。
最近我們產(chǎn)品需要在瀏覽器里動態(tài)載入一段CSS,以前的代碼是直接用的:
var bubbleCss = document.createElement('style');
bubbleCss.type = 'text/css';
bubbleCss.innerHTML = blc_conf.bubbleStyle;
document.getElementsByTagName('head')[0].appendChild(bubbleCss);
不過這個只有IE9支持,在IE8下會出問題,一直也沒注意到這塊,直到最近重構(gòu)后做完整測試的時候才發(fā)現(xiàn)。
網(wǎng)上搜到一個技巧,試過,可行,但是有一些問題
window.bc_bubble_css = blc_conf.bubbleStyle;
document.createStyleSheet("javascript:bc_bubble_css");
這里可以創(chuàng)建由變量bc_bubble_css定義的樣式,不過由于HTML5逐漸普及,我們的css里也混入了一些css3 selector,使用這個方法會導(dǎo)致IE8的parser解析到css3 selector的時候拋異常并停止解析后續(xù)css,這讓css只加載了一半,網(wǎng)上搜到的辦法都是用StyleSheet類型的addRule來增加,不過這個需要自己指定css2 selector以及樣式,
因此需要從CSS中拆開單個的規(guī)則,然后依次調(diào)用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,不過依然有漏網(wǎng)的selector,需要在后面try catch 捉一下。
另外再次鄙視設(shè)計IE接口的人
相關(guān)文章
Bootstrap CSS組件之按鈕組(btn-group)
這篇文章主要為大家詳細介紹了Bootstrap CSS組件之按鈕組(btn-group),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12阿里巴巴技術(shù)文章分享 Javascript繼承機制的實現(xiàn)
這篇文章主要介紹了阿里巴巴技術(shù)文章,分享的是一篇關(guān)于Javascript實現(xiàn)繼承機制的文章,感興趣的小伙伴們可以參考一下2016-01-01BootstrapValidator實現(xiàn)注冊校驗和登錄錯誤提示效果
這篇文章主要為大家詳細介紹了Bootstrap Validator實現(xiàn)注冊校驗和登錄錯誤提示效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03JS實現(xiàn)快速比較兩個字符串中包含有相同數(shù)字的方法
這篇文章主要介紹了JS實現(xiàn)快速比較兩個字符串中包含有相同數(shù)字的方法,涉及javascript字符串的遍歷、排序、比較等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09淺談js中StringBuffer類的實現(xiàn)方法及使用
下面小編就為大家?guī)硪黄獪\談js中StringBuffer類的實現(xiàn)方法及使用。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09