IE8_javascript 팁에서 동적으로 생성된 스크립트 태그의 잘못된 온로드에 대한 솔루션

이 문서의 예에서는 IE8에서 동적으로 생성된 스크립트 태그의 잘못된 온로드에 대한 솔루션을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

오늘 프로젝트 작업을 하다가 동적으로 생성된 스크립트 태그가 IE8에서 onload 이벤트를 실행할 수 없다는 이상한 문제를 발견했습니다.

코드는 다음과 같습니다.

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

var loadJs = function(src, fun){
var 스크립트 = null
​ script = document.createElement("script")
​ script.type = "텍스트/자바스크립트"
Script.src = src
If(재미 유형 === "함수"){
          script.onload = 재미
}

Document.getElementsByTagName("head")[0].appendChild(script)
};
loadJs("js/jquery-1.11.0.min.js", function(){
console.log("jQuery에서")
})

loadJs("test.js", function(){
Console.log("test.js에서")
});
test.js：
console.log(jQuery 유형);

실행 결과:

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

정의되지 않음 // test.js 실행 시 jQuery가 로드되지 않았습니다. 아직

>> typeof jQuery // 콘솔에서 실행하면 jQuery 객체가 발견되어 로딩 순서 문제가 있음을 증명합니다.
"기능"

그리고 위의 코드에서는 script.onload가 실행되지 않는데, 코드는 분명히 로드되었는데 왜 여전히 onload가 실행되지 않는 걸까요? 온라인으로 확인한 결과 많은 프런트엔드 개발자가 이 어려운 문제에 직면했다는 사실을 발견하고 다음과 같은 대체 솔루션을 찾았습니다.

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

var loadJs = function(src, fun){

var 스크립트 = null
​ script = document.createElement("script")
​ script.type = "텍스트/자바스크립트"
Script.src = src
If(재미 유형 === "함수"){
           script.onreadystatechange = function() {
            var r = script.readyState
console.log(src ": " r)
If (r === '로드됨' || r === '완료') {
                    script.onreadystatechange = null
                   재미()
               }
          }
}

Document.getElementsByTagName("head")[0].appendChild(script)
};

실행 결과:

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

정의되지 않음

js/jquery-1.11.0.min.js: 로딩
test.js: 완료
test.js에서
js/jquery-1.11.0.min.js: 로드됨
jQuery에서

실행 단계는 다음과 같습니다.이제 onload와 유사한 함수가 발견되었으나 순서대로 로드되지 않는 문제가 있습니다. test.js의 내용이 실행됩니다. test.js는 jQuery보다 먼저 실행되기 때문에 undefound가 출력됩니다. 따라서 선형적으로 로드되도록 다음과 같이 다시 작성할 수 있습니다.

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

loadJs("js/jquery-1.11.0.min.js", function(){

console.log("jQuery에서")

LoadJs("test.js", function(){
console.log("test.js에서"); });   });

실행 결과:

코드 복사 코드는 다음과 같습니다.js/jquery-1.11.0.min.js: loading

js/jquery-1.11.0.min.js: 로드됨

jQuery에서
기능
test.js: 완료
test.js에서

이번에 실행 순서는 우리가 예약한 순서와 완전히 일치했는데, 위의 코드가 굉장히 어색해 보이고 레이어별로 중첩해야 해서 이런 작성 방법을 발견했습니다.

코드 복사 코드는 다음과 같습니다.var loadJs = function(src, fun){

var 스크립트 = null

​ script = document.createElement("script")
​ script.type = "텍스트/자바스크립트"
Script.src = src
If(재미 유형 === "함수"){
           script.onreadystatechange = function() {
            var r = script.readyState
console.log(src ": " r)
If (r === '로드됨' || r === '완료') {
                    script.onreadystatechange = null
                   재미()
               }
          }
}

Document.write(script.outerHTML)
//document.getElementsByTagName("head")[0].appendChild(script)

};
loadJs("js/jquery-1.11.0.min.js", function(){
console.log("jQuery에서")
})

loadJs("test.js", function(){
Console.log("test.js에서")
});

실행 결과의 순서도 다릅니다:

코드 복사 코드는 다음과 같습니다.함수 js/jquery-1.11.0.min.js: 로드됨

jQuery에서

test.js: 로드됨
test.js에서

로딩순서를 변경하는 경우

코드 복사 코드는 다음과 같습니다.loadJs("test.js", function(){ Console.log("test.js에서")

})

loadJs("js/jquery-1.11.0.min.js", function(){
console.log("jQuery에서")
});

실행 결과도 순차 로딩과 마찬가지로 다릅니다.

코드 복사 코드는 다음과 같습니다.정의되지 않음 test.js: 로드됨

test.js에서

js/jquery-1.11.0.min.js: 로드됨
jQuery에서


이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.