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 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
JS前端笔试题分析
Dec 19 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
uni-app如何实现增量更新功能
Jan 03 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
PHP缓存机制Output Control详解
2014/07/14 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
javascript引用对象的方法
2007/01/11 Javascript
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
科级干部考察材料
2014/02/15 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
优秀班组长事迹
2014/05/31 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
新闻报道稿范文
2015/07/23 职场文书
女性励志书籍推荐
2019/08/19 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android