快捷導(dǎo)航

如何動(dòng)態(tài)加載外部Javascript文件

更新時(shí)間：2015年12月02日 16:22:26 作者：孤傲蒼狼

這篇文章主要介紹了如何動(dòng)態(tài)加載外部Javascript文件，本文舉例講解使用js加載器動(dòng)態(tài)加載外部Javascript文件，感興趣的小伙伴們可以參考一下

最近在網(wǎng)上找到了一個(gè)可以動(dòng)態(tài)加載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對(duì)象用來(lái)加載外部的js文件
 */
MiniSite.JsLoader={
 /**
  * 加載外部的js文件
  * @param sUrl 要加載的js的url地址
  * @fCallback js加載完成之后的處理函數(shù)
  */
 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測(cè)試

<!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){
   //動(dòng)態(tài)加載Js
   MiniSite.JsLoader.load("js/jquery-1.9.1.js",function(){
    alert("動(dòng)態(tài)加載的是jquery-1.9.1.js");
    $(function(){
     alert("jquery-1.9.1.js動(dòng)態(tài)加載完成之后做的處理操作");
    });
   }); 
  }else{
   MiniSite.JsLoader.load("js/jquery-2.0.3.js",function(){
    alert("動(dòng)態(tài)加載的是jquery-2.0.3.js");
    $(function(){
     alert("jquery-2.0.3.js動(dòng)態(tài)加載完成之后做的處理操作");
    });
   });
  }
 </script>
 </head>
 
 <body>
 
 </body>
</html>

測(cè)試結(jié)果如下：

IE瀏覽器下測(cè)試結(jié)果：

google瀏覽器下的測(cè)試結(jié)果：

為大家分享的如何使用js加載器動(dòng)態(tài)加載外部Javascript文件，相信一定會(huì)對(duì)大家的學(xué)習(xí)有很大的幫助。

您可能感興趣的文章:

相關(guān)文章

獲取Javscript執(zhí)行函數(shù)名稱的方法
獲取Javscript執(zhí)行函數(shù)名稱的方法...
2006-12-12
js Canvas繪制圓形時(shí)鐘教程
這篇文章主要為大家詳細(xì)介紹了js Canvas繪制圓形時(shí)鐘教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
詳解在微信小程序的JS腳本中使用Promise來(lái)優(yōu)化函數(shù)處理
這篇文章主要介紹了詳解在微信小程序的JS腳本中使用Promise來(lái)優(yōu)化函數(shù)處理，引入Promise確實(shí)能夠很好的解決異步回調(diào)函數(shù)的可讀性等問(wèn)題，同時(shí)也使得我們調(diào)用的時(shí)候代碼簡(jiǎn)潔一些，本文介紹如何在小程序的JS代碼里面使用Promise來(lái)封裝一些函數(shù)的做法
2019-03-03
基于js實(shí)現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過(guò)程解析
這篇文章主要介紹了基于js實(shí)現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
ES11屢試不爽的新特性,你用上了幾個(gè)
這篇文章主要介紹了ES11屢試不爽的新特性,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
服務(wù)器端的JavaScript腳本 Node.js 使用入門(mén)
觸爪伸向傳說(shuō)中的Server-Side Javascrpt。后端JS最出名無(wú)疑是Ryan Dahl的node.js，另一個(gè)是aptana IDE提供商搞出的jaxer，這里討論node.js的使用
2012-03-03
JavaScript設(shè)計(jì)模式策略模式案例分享
這篇文章主要介紹了JavaScript設(shè)計(jì)模式策略模式案例分享，策略設(shè)計(jì)模式就是指一個(gè)問(wèn)題匹配多個(gè)解決方法，不一定要用到哪一個(gè)，而且有可能隨時(shí)增加多個(gè)方案
2022-06-06
微信小程序scroll-view的滾動(dòng)條設(shè)置實(shí)現(xiàn)
這篇文章主要介紹了微信小程序scroll-view的滾動(dòng)條設(shè)置實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
微信小程序+騰訊地圖開(kāi)發(fā)實(shí)現(xiàn)路徑規(guī)劃繪制
這篇文章主要介紹了微信小程序+騰訊地圖開(kāi)發(fā)實(shí)現(xiàn)路徑規(guī)劃繪制，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
使用layui的layer組件做彈出層的例子
今天小編就為大家分享一篇使用layui的layer組件做彈出層的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09