Heim > Web-Frontend > js-Tutorial > Hauptteil

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
1434 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 🎜>

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
Verwandte Etiketten:
ie8
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!