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 相关文章推荐
5种处理js跨域问题方法汇总
Dec 04 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 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
15种PHP Encoder的比较
2007/03/06 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
php多任务程序实例解析
2014/07/19 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
DWR Ext 加载数据
2009/03/22 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
python执行get提交的方法
2015/04/29 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
Python collections模块的使用方法
2020/10/09 Python
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
Ejb技术面试题
2015/04/29 面试题
2014政务公开实施方案
2014/02/19 职场文书
慈善晚会策划方案
2014/05/14 职场文书
英文演讲稿开场白
2014/08/25 职场文书
电工实训报告总结
2014/11/05 职场文书
公司开除员工通知
2015/04/22 职场文书
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL