IE8에서 script 탭을 동적으로 만드는 올바르지 않은 해결 방법

이 실례는 IE8에서 동적 생성script 라벨 onload가 올바르지 않은 해결 방법을 설명합니다.여러분에게 참고하도록 공유하다.구체적인 분석은 다음과 같다.
오늘 프로젝트를 진행하는데, 동적으로 만든script 탭이 IE8에서 onload 이벤트를 터치할 수 없는 이상한 문제를 발견했습니다.
코드는 다음과 같습니다.

   var loadJs = function(src, fun){ 
  
     var script = null; 
  
     script = document.createElement("script"); 
  
     script.type = "text/javascript"; 
  
     script.src = src; 
  
     if(typeof fun === "function"){ 
  
         script.onload = fun; 
  
     } 
  
   
  
     document.getElementsByTagName("head")[0].appendChild(script); 
  
 }; 
  
   
  
 loadJs("js/jquery-1.11.0.min.js", function(){ 
  
     console.log("From jQuery");          
  
 }); 
  
   
  
 loadJs("test.js", function(){ 
  
     console.log("From test.js");          
  
 }); 
  
 test.js： 
  
 console.log(typeof jQuery); 
 

실행 결과:

   undefined  // test.js   ，jQuery     
  
 >> typeof jQuery  //        ，    jQuery  ，         
  
 "function" 
 

그리고 위 코드에서script.onload는 실행되지 않았습니다. 코드가 불러왔는데 왜 onload가 실행되지 않습니까?인터넷에 검색해 보니 많은 전방 개발자들이 이 까다로운 문제에 부딪혔기 때문에 다음과 같은 후보 방안을 찾았다.

   var loadJs = function(src, fun){ 
  
     var script = null; 
  
     script = document.createElement("script"); 
  
     script.type = "text/javascript"; 
  
     script.src = src; 
  
     if(typeof fun === "function"){ 
  
         script.onreadystatechange = function() { 
  
             var r = script.readyState; 
  
             console.log(src + ": " + r); 
  
             if (r === 'loaded' || r === 'complete') { 
  
                 script.onreadystatechange = null; 
  
                 fun(); 
  
             } 
  
         }; 
  
     } 
  
   
  
     document.getElementsByTagName("head")[0].appendChild(script); 
  
 }; 
 

실행 결과:

   undefined  
  
 js/jquery-1.11.0.min.js: loading  
  
 test.js: complete  
  
 From test.js  
  
 js/jquery-1.11.0.min.js: loaded  
  
 From jQuery 
 

실행 절차는 onload와 유사한 기능을 찾은 셈이지만, 문제가 하나 있습니다. 이것은 순서대로 불러오는 것이 아닙니다. jQuery 파일loading일 때test.js는 이미complete이고 첫 줄에서test를 실행했습니다.js의 내용.테스트 때문에.js가 jQuery보다 먼저 실행되기 때문에 undefined를 칩니다.따라서 선형 로드를 위해 다음과 같이 재정의할 수 있습니다.

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

실행 결과:

   js/jquery-1.11.0.min.js: loading  
  
 js/jquery-1.11.0.min.js: loaded  
  
 From jQuery  
  
 function 
  
 test.js: complete  
  
 From test.js 
 

이번에 집행하는 순서는 완전히 우리가 예약한 순서에 따랐지만 상기 코드는 보기에 매우 어색하고 겹겹이 끼워 넣어야 하기 때문에 이런 문법을 발견했다.

   var loadJs = function(src, fun){ 
  
     var script = null; 
  
     script = document.createElement("script"); 
  
     script.type = "text/javascript"; 
  
     script.src = src; 
  
     if(typeof fun === "function"){ 
  
         script.onreadystatechange = function() { 
  
             var r = script.readyState; 
  
             console.log(src + ": " + r); 
  
             if (r === 'loaded' || r === 'complete') { 
  
                 script.onreadystatechange = null; 
  
                 fun(); 
  
             } 
  
         }; 
  
     } 
  
   
  
     document.write(script.outerHTML); 
  
     //document.getElementsByTagName("head")[0].appendChild(script); 
  
   
  
 }; 
  
   
  
 loadJs("js/jquery-1.11.0.min.js", function(){ 
  
     console.log("From jQuery");  
  
 }); 
  
   
  
 loadJs("test.js", function(){ 
  
     console.log("From test.js");          
  
 }); 
 

결과 실행 순서도 다릅니다.

   function 
  
 js/jquery-1.11.0.min.js: loaded  
  
 From jQuery  
  
 test.js: loaded  
  
 From test.js 
 

하면, 만약, 만약...

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

실행 결과도 다음과 같이 순서대로 로드됩니다.

   undefined  
  
 test.js: loaded  
  
 From test.js  
  
 js/jquery-1.11.0.min.js: loaded  
  
 From jQuery 
 

본고에서 말한 바와 같이 여러분의 자바스크립트 프로그램 설계에 도움이 되었으면 합니다.