JS加載器如何動態(tài)加載外部js文件

更新時間：2016年05月26日 11:30:11 作者：孤傲蒼狼

這篇文章主要介紹了JS加載器如何動態(tài)加載外部js文件的相關資料,需要的朋友可以參考下

今天在網(wǎ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對象用來加載外部的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')[].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){
//動態(tài)加載Js
MiniSite.JsLoader.load("js/jquery-...js",function(){
alert("動態(tài)加載的是jquery-...js");
$(function(){
alert("jquery-...js動態(tài)加載完成之后做的處理操作");
});
}); 
}else{
MiniSite.JsLoader.load("js/jquery-...js",function(){
alert("動態(tài)加載的是jquery-...js");
$(function(){
alert("jquery-...js動態(tài)加載完成之后做的處理操作");
});
});
}
</script>
</head>
<body>
</body>
</html>

測試結果如下：

您可能感興趣的文章:

layui點擊左側導航欄,實現(xiàn)不刷新整個頁面,只刷新局部的方法
今天小編就為大家分享一篇layui點擊左側導航欄,實現(xiàn)不刷新整個頁面,只刷新局部的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JavaScript 函數(shù)節(jié)流詳解及方法總結
這篇文章主要介紹了JavaScript 函數(shù)節(jié)流詳解及實例的相關資料,需要的朋友可以參考下
2017-02-02
javascript實現(xiàn)用戶管理系統(tǒng)
這篇文章主要為大家詳細介紹了javascript實現(xiàn)用戶管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
微信小程序實現(xiàn)全局狀態(tài)管理的方法整理
已知微信小程序中如果要做到全局狀態(tài)共享，常用的有四種方式，分別是globalData、本地緩存、mobx-miniprogram和westore，本文將帶大家看看mobx-miniprogram是如何實現(xiàn)的小程序的全局狀態(tài)管理，需要的可以收藏一下
2023-06-06
js中對象和面向對象與Json介紹
今天小編就為大家分享一篇關于js中對象和面向對象與Json介紹，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01
JavaScript分頁組件使用方法詳解
這篇文章主要為大家詳細介紹了JavaScript分頁組件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-07-07
webpack打包優(yōu)化的幾個方法總結
這篇文章主要介紹了webpack打包優(yōu)化的幾個方法總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-02-02
微信小程序用戶后臺定位及錄音授權及請求示例
這篇文章主要為大家介紹了微信小程序用戶后臺定位及錄音授權及請求示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-04-04
基于JS實現(xiàn)的倒計時程序實例
這篇文章主要介紹了基于JS實現(xiàn)的倒計時程序,實例分析了javascript實現(xiàn)倒計時計數(shù)的相關技巧,非常簡單實用,需要的朋友可以參考下
2015-07-07
webpack打包時如何修改文件名的實現(xiàn)示例
本文主要介紹了webpack打包時如何修改文件名的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06