JS加载器如何动态加载外部js文件


Posted in Javascript onMay 26, 2016

今天在网上找到了一个可以动态加载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')[].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-...js",function(){
alert("动态加载的是jquery-...js");
$(function(){
alert("jquery-...js动态加载完成之后做的处理操作");
});
}); 
}else{
MiniSite.JsLoader.load("js/jquery-...js",function(){
alert("动态加载的是jquery-...js");
$(function(){
alert("jquery-...js动态加载完成之后做的处理操作");
});
});
}
</script>
</head>
<body>
</body>
</html>

测试结果如下:

JS加载器如何动态加载外部js文件

Javascript 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
简单的js表格操作
Sep 24 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
jQuery文字轮播特效
Feb 12 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 Javascript
jquery获取复选框的值的简单实例
May 26 #Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 #Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 #Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 #Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 #Javascript
jquery获取所有选中的checkbox实现代码
May 26 #Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 #Javascript
You might like
php中过滤非法字符的具体实现
2013/10/29 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
详解PHP归并排序的实现
2016/10/18 PHP
完美的php分页类
2017/10/24 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
linux下python使用sendmail发送邮件
2018/05/22 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
盛大笔试题
2016/11/05 面试题
建筑实习自我鉴定
2013/10/18 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
团委竞选演讲稿
2014/04/24 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
留学推荐信中文范文
2015/03/26 职场文书