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 相关文章推荐
Javascript 中的类和闭包
Jan 08 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
jquery实现提示语淡入效果
May 05 jQuery
JS中常用的消息框总结
Feb 24 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
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
多重?l件?合查?(一)
2006/10/09 PHP
一个改进的UBB类
2006/10/09 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
原生JavaScript实现购物车
2021/01/10 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
Python fileinput模块使用实例
2015/05/28 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
python使用psutil模块获取系统状态
2016/08/27 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
教师队伍管理制度
2014/01/14 职场文书
中学生获奖感言
2014/02/04 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
爱护公共设施标语
2014/06/24 职场文书
人事局接收函
2015/01/31 职场文书
研讨会致辞
2015/07/31 职场文书
编写python程序的90条建议
2021/04/14 Python
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
利用python做数据拟合详情
2021/11/17 Python
Golang 对es的操作实例
2022/04/20 Golang