如何动态加载外部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 相关文章推荐
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
一个PHP的String类代码
2010/04/20 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
Python实现完整的事务操作示例
2017/06/20 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
值得收藏的10道python 面试题
2019/04/15 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
详解python中各种文件打开模式
2020/01/19 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
创意活动策划书
2014/01/15 职场文书
计生专干事迹
2014/05/28 职场文书
法人身份证明书
2015/06/18 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
vue实现移动端div拖动效果
2022/03/03 Vue.js