如何动态加载外部Javascript文件


Posted in Javascript onDecember 02, 2015

最近在网上找到了一个可以动态加载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')[0].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-1.9.1.js",function(){
    alert("动态加载的是jquery-1.9.1.js");
    $(function(){
     alert("jquery-1.9.1.js动态加载完成之后做的处理操作");
    });
   }); 
  }else{
   MiniSite.JsLoader.load("js/jquery-2.0.3.js",function(){
    alert("动态加载的是jquery-2.0.3.js");
    $(function(){
     alert("jquery-2.0.3.js动态加载完成之后做的处理操作");
    });
   });
  }
 </script>
 </head>
 
 <body>
 
 </body>
</html>

测试结果如下:

IE浏览器下测试结果:

如何动态加载外部Javascript文件

如何动态加载外部Javascript文件

google浏览器下的测试结果:

如何动态加载外部Javascript文件

如何动态加载外部Javascript文件

为大家分享的如何使用js加载器动态加载外部Javascript文件,相信一定会对大家的学习有很大的帮助。

Javascript 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
js字符编码函数区别分析
Jun 05 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 #Javascript
JavaScript如何禁止Backspace键
Dec 02 #Javascript
js文本框输入内容智能提示效果
Dec 02 #Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 #Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 #Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 #Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 #Javascript
You might like
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
浅析php数据类型转换
2014/01/09 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
js select option对象小结
2013/12/20 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
python保存文件方法小结
2018/07/27 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
python如何进入交互模式
2020/07/06 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
python获取linux系统信息的三种方法
2020/10/14 Python
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
毕业生自荐书
2013/12/18 职场文书
实习生自我评价
2014/01/18 职场文书
团队经理竞聘书
2014/03/31 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
电子商务专业自荐信
2014/06/02 职场文书
数学教师个人总结
2015/02/06 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python