IE8_javascript 기술에서 CSS를 동적으로 로드하기 위해 javascript를 사용하는 솔루션

우리 모두 알다시피, 프론트엔드 개발자는 IE 개발자를 쫓아내고 싶어합니다. IE 개발자의 평판은 GFW 개발자의 평판에 못지 않습니다. 하지만 현지 시장에서는 모두가 그들을 처벌할 것입니다. 중국처럼 점유율은 있고, 현실에 굴복할 수밖에 없습니다.

최근 우리 제품은 브라우저에서 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 선택기도 혼합되어 있습니다. 이 방법을 사용하면 CSS3 선택기를 구문 분석할 때 IE8의 구문 분석기가 예외를 발생시키고 후속 CSS 구문 분석을 중지합니다. 이로 인해 CSS가 절반만 로드됩니다. 온라인에 있는 메소드는 모두 StyleSheet를 사용하여 추가하지만, 이를 위해서는 CSS2 선택기와 스타일을 직접 지정해야 합니다.
따라서 CSS에서 단일 규칙을 분해한 다음 순서대로 addRule을 호출해야 합니다. 🎜>

코드 복사 코드는 다음과 같습니다.

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

처음에는 응시와 일부 CSS3 선택기를 각각 제거하는 두 가지 대체 항목이 있지만 여전히 일부 선택기가 빠져 있습니다. 그물을 통해 나중에 시도 캐치로 잡아야합니다.
또한 IE 인터페이스를 디자인한 사람들을 다시 한 번 경멸합니다