如何动态加载外部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 相关文章推荐
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
javascript Keycode对照表
2009/10/24 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
python文件的md5加密方法
2016/04/06 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
外企测试工程师面试题
2015/02/01 面试题
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
仓库主管的岗位职责
2013/12/04 职场文书
校园活动宣传方案
2014/03/28 职场文书
人事文员岗位职责
2015/02/04 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
HTML基础详解(下)
2021/10/16 HTML / CSS
欧元符号 €
2022/02/17 杂记