Solution pour utiliser javascript pour charger dynamiquement CSS dans les conseils IE8

Solution pour utiliser javascript pour charger dynamiquement CSS dans les conseils IE8_javascript

WBOY

Libérer： 2016-05-16 16:44:13

original

1461 Les gens l'ont consulté

Comme nous le savons tous, les développeurs front-end sont impatients de chasser les développeurs IE. La réputation des développeurs IE n'est pas moindre que celle des développeurs GFW. S'ils ruinent le marché sans conscience, tout le monde les punira. comme la Chine, la part est là et nous n'avons d'autre choix que de nous plier à la réalité.

Récemment, notre produit doit charger dynamiquement un morceau de CSS dans le navigateur. Le code précédent a été utilisé directement :

Copiez le code. Le code est le suivant :

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

Cependant, cela n'est pris en charge que par IE9 et posera des problèmes sous IE8. Je ne l'ai jamais remarqué jusqu'à ce que. la reconstruction récente, je l'ai découvert plus tard lorsque j'ai fait un test complet.
J'ai trouvé une astuce en ligne et je l'ai essayée. Cela fonctionne, mais il y a quelques problèmes

Copiez le code Le code est comme suit :

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

Ici, vous pouvez créer un style défini par la variable bc_bubble_css, mais en raison de la popularité croissante de HTML5, notre CSS contient également des sélecteurs CSS3. L'utilisation de cette méthode entraînera l'analyseur d'IE8 à lever une exception lors de l'analyse du sélecteur CSS3 et à arrêter l'analyse des CSS suivants. Cela rend le CSS à moitié chargé. . Les méthodes trouvées en ligne utilisent toutes StyleSheet. Tapez addRule pour ajouter, mais cela nécessite de spécifier vous-même le sélecteur css2 et le style
Par conséquent, vous devez démonter une seule règle de CSS, puis appeler addRule dans l'ordre. 🎜>

Copier le code Le code est le suivant :

var s = document.createStyleSheet();
var règles = blc_conf.bubbleStyle.replace(//*[ ^*]**//g, "").replace(/@[^{]*{/g, '').match(/[^ {}] {[^}] }/g);
for(var i = 0; i < règles.longueur; i ) {
 var m = règles[i].match(/(.* )s*{s*(.*)}/);
 if(m) {
 try {
 s.addRule(m[1], m[2]);
 } catch (e) {
 }
 }
 }

Il y a deux remplacements au début, qui suppriment respectivement le regard et certains sélecteurs css3. Cependant, il y a encore des sélecteurs qui ont glissé. à travers le filet et doivent être attrapés plus tard par un essai de capture.
De plus, je méprise encore une fois les personnes qui ont conçu l'interface IE