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实现点击自动选择TextArea文本的方法
Jul 02 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
纯JS实现简单的日历
Jun 26 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
详解vue中移动端自适应方案
May 05 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 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
使用Yii2实现主从数据库设置
2016/11/20 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
vue实现循环切换动画
2018/10/17 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
彻底理解Python中的yield关键字
2019/04/01 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
numpy 声明空数组详解
2019/12/05 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
python中的django是做什么的
2020/07/31 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
小学生节水倡议书
2015/04/29 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
国情备忘录观后感
2015/06/04 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
导游词之井冈山
2019/11/20 职场文书
python实现会员管理系统
2022/03/18 Python
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang