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類型的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接口的人
相關(guān)文章
webpack下實(shí)現(xiàn)動(dòng)態(tài)引入文件方法
下面小編就為大家分享一篇webpack下實(shí)現(xiàn)動(dòng)態(tài)引入文件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
微信小程序使用onreachBottom實(shí)現(xiàn)頁(yè)面觸底加載及分頁(yè)效果
小程序還沒(méi)有使用pc端的那種分頁(yè)格式,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用onreachBottom實(shí)現(xiàn)頁(yè)面觸底加載及分頁(yè)效果的相關(guān)資料,需要的朋友可以參考下2022-10-10
javascript避免數(shù)字計(jì)算精度誤差的方法詳解
本篇文章主要是對(duì)javascript避免數(shù)字計(jì)算精度誤差的方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
使用 Jest 和 Supertest 進(jìn)行接口端點(diǎn)測(cè)試實(shí)例詳解
這篇文章主要介紹了使用 Jest 和 Supertest 進(jìn)行接口端點(diǎn)測(cè)試,結(jié)合實(shí)例形式詳細(xì)分析了使用 Jest 和 Supertest 進(jìn)行接口端點(diǎn)測(cè)試具體原理、操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-04-04
這篇文章主要介紹了JS深度拷貝Object Array,結(jié)合實(shí)例形式分析了JavaScript深度拷貝的原理,需要的朋友可以參考下2016-03-03
PDF.js是一個(gè)JavaScript庫(kù),可在瀏覽器中無(wú)插件顯示PDF,提供縮放、翻頁(yè)、文本搜索等功能,下面這篇文章主要介紹了PDF.js的使用及其跨域問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下2025-04-04
JavaScript報(bào)錯(cuò)：Uncaught ReferenceError: XYZ is&
在 JavaScript 編程中,“Uncaught ReferenceError: XYZ is not defined” 是一種常見(jiàn)的錯(cuò)誤,這種錯(cuò)誤通常發(fā)生在試圖使用一個(gè)未聲明的變量或標(biāo)識(shí)符時(shí),故本文給大家介紹了JavaScript報(bào)錯(cuò)：Uncaught ReferenceError: XYZ is not defined的解決方法,需要的朋友可以參考下2024-07-07
JS實(shí)現(xiàn)的跨瀏覽器解析XML文件實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的跨瀏覽器解析XML文件的方法,結(jié)合實(shí)例形式分析了javascript基于ActiveXObject操作xml文件的加載與解析相關(guān)技巧,需要的朋友可以參考下2016-06-06
javascript:void(0)用法及常見(jiàn)問(wèn)題解析
javascript:void(0)?是一個(gè)常見(jiàn)的用法,通常用于創(chuàng)建一個(gè)空操作或者防止頁(yè)面跳轉(zhuǎn),本文主要介紹了javascript:void(0)用法及常見(jiàn)問(wèn)題解析,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
flash調(diào)用js中的方法,讓js傳遞變量給flash的辦法及思路
前幾天發(fā)表了 將FlashVars寫在JS函數(shù)中，實(shí)現(xiàn)與后臺(tái)的實(shí)時(shí)變量更新，但是僅支持 IE，隨后與 Luckyer 進(jìn)行了交流，發(fā)現(xiàn)用 SetVariable 可以很方便的實(shí)現(xiàn)多瀏覽器兼容。舉例如下。2013-08-08