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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
JavaScript中操作字符串小结
May 04 Javascript
javascript检测两个数组是否相似
May 19 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 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
中国收音机工业发展史
2021/03/02 无线电
用php实现的下载css文件中的图片的代码
2010/02/08 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
Jquery常用技巧收集整理篇
2010/11/14 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
Python实现抓取网页并且解析的实例
2014/09/20 Python
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
Python 加密的实例详解
2017/10/09 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
新浪网技术部笔试题
2016/08/26 面试题
工会主席岗位责任制
2014/02/11 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
小学教师见习总结
2015/06/23 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python