如何动态加载外部Javascript文件

 更新时间:2015年12月02日 16:22:26   作者:孤傲苍狼   我要评论
这篇文章主要介绍了如何动态加载外部Javascript文件,本文举例讲解使用js加载器动态加载外部Javascript文件,感兴趣的小伙伴们可以参考一下

最近在网上找到了一个可以动态加载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','utf-8'); 
  _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浏览器下测试结果:


google浏览器下的测试结果:

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

相关文章

  • 解决JS表单验证只有第一个IF起作用的问题

    解决JS表单验证只有第一个IF起作用的问题

    这篇文章主要介绍了解决JS表单验证只有第一个IF起作用的问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • javaScript中Math()函数注意事项

    javaScript中Math()函数注意事项

    本文主要给大家分享了javascript中Math()函数的注意事项,以及math对象的方法,十分的简单实用,有需要的小伙伴可以参考下
    2015-06-06
  • JavaScript用构造函数如何获取变量的类型名

    JavaScript用构造函数如何获取变量的类型名

    在JavaScript中,如何准确获取变量的类型名是一个经常使用的问题。但是常常不能获取到变量的精确名称,或者必须使用jQuery 中的方法,这里通过 typeof ,jQuery.type 和 通过构造函数来获取变量类型这三种方法详细介绍一遍。有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-12-12
  • javascript常用函数(1)

    javascript常用函数(1)

    这篇文章主要介绍了javascript常用函数,15个常用函数,都具有很高的实用性,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JS forEach和map方法的用法与区别分析

    JS forEach和map方法的用法与区别分析

    这篇文章主要介绍了JS forEach和map方法的用法与区别,结合实例形式分析了forEach和map方法的功能、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-02-02
  • 基于JS实现简单的样式切换效果代码

    基于JS实现简单的样式切换效果代码

    这篇文章主要介绍了基于JS实现简单的样式切换效果代码,涉及简单的javascript控制页面元素样式变换的技巧,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • JS封装的三级联动菜单(使用时只需要一行js代码)

    JS封装的三级联动菜单(使用时只需要一行js代码)

    在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等。这篇文章主要介绍了JS封装的三级联动菜单(使用时只需要一行js代码)的相关资料,需要的朋友可以参考下
    2016-10-10
  • 微信小程序教程系列之视图层的条件渲染(10)

    微信小程序教程系列之视图层的条件渲染(10)

    这篇文章主要为大家详细介绍了微信小程序教程系列之视图层的条件渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • a标签置灰不可点击的实现方法

    a标签置灰不可点击的实现方法

    下面小编就为大家带来一篇a标签置灰不可点击的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 手把手教你写一个微信小程序(推荐)

    手把手教你写一个微信小程序(推荐)

    最近接了一个微信小程序的项目,项目需求是小程序语音识别,全景图片观看,登录授权,获取个人基本信息。非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-10-10

最新评论