Lösung für die Verwendung von Javascript zum dynamischen Laden von CSS in IE8

Lösung für die Verwendung von Javascript zum dynamischen Laden von CSS in IE8_Javascript-Tipps

WBOY

Freigeben： 2016-05-16 16:44:13

Original

1462 Leute haben es durchsucht

Wie wir alle wissen, sind Front-End-Entwickler bestrebt, IE-Entwickler zu vertreiben. Der Ruf von IE-Entwicklern ist nicht geringer als der von GFW-Entwicklern. Aber auf lokalen Märkten wird jeder sie bestrafen wie China Die Aktie ist da, und wir haben keine andere Wahl, als uns der Realität zu beugen.

Vor Kurzem muss unser Produkt ein Stück CSS dynamisch in den Browser laden. Der vorherige Code wurde direkt verwendet:

Kopieren Sie den Code Der Code lautet wie folgt:

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

Dies wird jedoch nur von IE9 unterstützt und wird unter IE8 zu Problemen führen Die jüngste Rekonstruktion habe ich später herausgefunden, als ich einen vollständigen Test durchgeführt habe.
Ich habe online einen Trick gefunden und ausprobiert. Er funktioniert, aber es gibt einige Probleme

Kopieren Sie den Code Der Code ist wie folgt:

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

Hier können Sie einen durch die Variable definierten Stil erstellen bc_bubble_css, aber aufgrund der zunehmenden Beliebtheit von HTML5 enthält unser CSS auch einige CSS3-Selektoren. Die Verwendung dieser Methode führt dazu, dass der Parser von IE8 beim Parsen des CSS3-Selektors eine Ausnahme auslöst und das Parsen nachfolgender CSS stoppt. Dadurch wird das CSS nur zur Hälfte geladen . Die online gefundenen Methoden verwenden alle StyleSheet zum Hinzufügen, aber dafür müssen Sie den CSS2-Selektor und den Stil selbst angeben. Daher müssen Sie eine einzelne Regel aus CSS zerlegen und dann addRule nacheinander aufrufen 🎜>

Code kopieren Der Code lautet wie folgt:

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]);
 } fangen (e) {
 }
 }

Am Anfang gibt es zwei Ersetzungen, die den Blick bzw. einige CSS3-Selektoren entfernen. Allerdings sind immer noch einige Selektoren verrutscht durch das Netz und muss später durch einen Versuch gefangen werden. 

Außerdem verachte ich wieder einmal die Leute, die die IE-Schnittstelle entworfen haben