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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
javascript深入理解js闭包
Jul 03 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
React实现全选功能
Aug 25 Javascript
JavaScript执行机制详细介绍
Dec 06 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 miniBB中文乱码问题解决方法
2008/11/25 PHP
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
python实现桌面托盘气泡提示
2019/07/29 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
新年联欢会主持词
2014/03/27 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang