如何动态加载外部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 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 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中显示格式化的用户输入
2006/10/09 PHP
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
javascript连续赋值问题
2015/07/08 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
Python单链表的简单实现方法
2014/09/23 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
浅谈Python __init__.py的作用
2020/10/28 Python
毕业生找工作推荐信
2013/11/21 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
活动总结书
2014/05/08 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
爱护公物主题班会
2015/08/17 职场文书
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技