IE8 で JavaScript を使用して CSS を動的にロードするための解決策

IE8 で JavaScript を使用して CSS を動的にロードするための解決策_JavaScript スキル

WBOY

リリース： 2016-05-16 16:44:13

オリジナル

1461 人が閲覧しました

ご存知のとおり、フロントエンド開発者は IE 開発者を追い出すことに熱心ですが、IE 開発者が良心の呵責なしに市場を破壊すれば、誰もが彼らを罰することになります。中国のようにシェアはそこにあり、現実に屈するしかありません。

最近、当社の製品はブラウザに CSS の一部を動的にロードする必要があります。以前のコードは直接使用されました:

コードをコピーしますコードは次のとおりです:

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

ただし、これは IE9 でのみサポートされており、IE8 では問題が発生します。最近の再構成は、後で完全なテストを行ったときにわかりました。
オンラインでトリックを見つけて試してみました。うまくいきましたが、いくつか問題があります

コードをコピーしますコードは次のとおりです。次のように:

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

ここで、変数によって定義されたスタイルを作成できます。 bc_bubble_css ですが、HTML5 の人気が高まっているため、CSS にはいくつかの CSS3 セレクターが混在しています。このメソッドを使用すると、IE8 のパーサーは CSS3 セレクターを解析するときに例外をスローし、後続の CSS の解析を停止します。これにより、CSS は半分しかロードされなくなります。オンラインで見つかったメソッドはすべて StyleSheet を使用しています。追加するには、css2 セレクターとスタイルを指定する必要があります。
したがって、CSS から 1 つのルールを逆アセンブルしてから、addRule を順番に呼び出す必要があります。 🎜>

コードをコピーコードは次のとおりです:

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

最初に 2 つの置換があり、それぞれ視線といくつかの CSS3 セレクターが削除されますが、まだいくつかのセレクターが抜けています。ネットを通過し、後でトライキャッチで捕まえる必要があります。
また、IE インターフェイスを設計した人々をもう一度軽蔑します