如何动态加载外部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 相关文章推荐
Date对象格式化函数代码
Jul 17 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
js Proxy的原理详解
May 25 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 ZipArchive压缩函数详解实例
2013/11/06 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
js验证表单大全
2006/11/25 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
JavaScript中this详解
2015/09/01 Javascript
Underscore源码分析
2015/12/30 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
Python编写电话薄实现增删改查功能
2016/05/07 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python实现一个简单的ping工具方法
2019/01/31 Python
python对csv文件追加写入列的方法
2019/08/01 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
中学生校园广播稿
2014/01/16 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
大学生个人学年总结
2015/02/15 职场文书
免职通知
2015/04/23 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis