집 > 기사 > 웹 프론트엔드 > 외부 Javascript 파일을 동적으로 로드하는 방법_javascript 팁

외부 Javascript 파일을 동적으로 로드하는 방법_javascript 팁

WBOY원래의: 2016-05-16 15:27:541182검색

최근 인터넷에서 js 파일을 동적으로 로드할 수 있는 js 로더를 찾았습니다.
JsLoader.js

var MiniSite=new Object();
/**
 * 判断浏览器
 */
MiniSite.Browser={ 
 ie:/msie/.test(window.navigator.userAgent.toLowerCase()), 
 moz:/gecko/.test(window.navigator.userAgent.toLowerCase()), 
 opera:/opera/.test(window.navigator.userAgent.toLowerCase()), 
 safari:/safari/.test(window.navigator.userAgent.toLowerCase()) 
};
/**
 * JsLoader对象用来加载外部的js文件
 */
MiniSite.JsLoader={
 /**
  * 加载外部的js文件
  * @param sUrl 要加载的js的url地址
  * @fCallback js加载完成之后的处理函数
  */
 load:function(sUrl,fCallback){ 
  var _script=document.createElement('script'); 
  _script.setAttribute('charset','gbk'); 
  _script.setAttribute('type','text/javascript'); 
  _script.setAttribute('src',sUrl); 
  document.getElementsByTagName('head')[0].appendChild(_script); 
  if(MiniSite.Browser.ie){ 
   _script.onreadystatechange=function(){ 
    if(this.readyState=='loaded'||this.readyStaate=='complete'){ 
     //fCallback();
     if(fCallback!=undefined){
       fCallback(); 
     }
      
    } 
   }; 
  }else if(MiniSite.Browser.moz){ 
   _script.onload=function(){ 
    //fCallback(); 
    if(fCallback!=undefined){
      fCallback(); 
    }
   }; 
  }else{ 
   //fCallback();
   if(fCallback!=undefined){
     fCallback(); 
   }
  } 
 } 
};

JsLoader.js 테스트

<!DOCTYPE HTML>
<html>
 <head>
 <!--引入js加载器 -->
 <script type="text/javascript" src="js/JsLoader.js"></script>
 <title>JsLoaderTest.html</title>
 <script type="text/javascript">
  if(MiniSite.Browser.ie){
   //动态加载Js
   MiniSite.JsLoader.load("js/jquery-1.9.1.js",function(){
    alert("动态加载的是jquery-1.9.1.js");
    $(function(){
     alert("jquery-1.9.1.js动态加载完成之后做的处理操作");
    });
   }); 
  }else{
   MiniSite.JsLoader.load("js/jquery-2.0.3.js",function(){
    alert("动态加载的是jquery-2.0.3.js");
    $(function(){
     alert("jquery-2.0.3.js动态加载完成之后做的处理操作");
    });
   });
  }
 </script>
 </head>
 
 <body>
 
 </body>
</html>

테스트 결과는 다음과 같습니다.

IE 브라우저에서의 테스트 결과:

Google 브라우저에서의 테스트 결과:

JS 로더를 사용하여 외부 Javascript 파일을 동적으로 로드하는 방법을 공유하겠습니다. 이것이 모든 사람의 학습에 큰 도움이 될 것이라고 믿습니다.

성명：

이전 기사：javascript code_javascript 기술을 기반으로 웹 페이지에 액세스하는 브라우저 렌더링 엔진, 플랫폼, Windows 운영 체제, 모바일 장치 및 게임 시스템을 탐지합니다.다음 기사：javascript code_javascript 기술을 기반으로 웹 페이지에 액세스하는 브라우저 렌더링 엔진, 플랫폼, Windows 운영 체제, 모바일 장치 및 게임 시스템을 탐지합니다.

외부 Javascript 파일을 동적으로 로드하는 방법_javascript 팁

관련 기사