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 基础篇4 window对象,DOM
Mar 14 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
javascript canvas实现雨滴效果
Jun 09 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 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
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
解决FLASH需要点击激活的代码
2006/12/20 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python运用于数据分析的简单教程
2015/03/27 Python
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
django之自定义软删除Model的方法
2019/08/14 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
如何基于python操作excel并获取内容
2019/12/24 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
Python中无限循环需要什么条件
2020/05/27 Python
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
普通党员整改措施
2014/10/24 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
2014年工程师工作总结
2014/11/25 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
爱心捐款活动总结
2015/05/09 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
新入职员工工作总结
2015/10/15 职场文书
php中pcntl_fork详解
2021/04/01 PHP