脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 动态加载外部Javascript文件的方法

如何动态加载外部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','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浏览器下测试结果：


google浏览器下的测试结果：

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

您可能感兴趣的文章:

相关文章

  • 获取Javscript执行函数名称的方法

    获取Javscript执行函数名称的方法

    获取Javscript执行函数名称的方法...
    2006-12-12
  • js Canvas绘制圆形时钟教程

    js Canvas绘制圆形时钟教程

    这篇文章主要为大家详细介绍了js Canvas绘制圆形时钟教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 详解在微信小程序的JS脚本中使用Promise来优化函数处理

    详解在微信小程序的JS脚本中使用Promise来优化函数处理

    这篇文章主要介绍了详解在微信小程序的JS脚本中使用Promise来优化函数处理，引入Promise确实能够很好的解决异步回调函数的可读性等问题，同时也使得我们调用的时候代码简洁一些，本文介绍如何在小程序的JS代码里面使用Promise来封装一些函数的做法
    2019-03-03
  • 基于js实现复制内容到操作系统粘贴板过程解析

    基于js实现复制内容到操作系统粘贴板过程解析

    这篇文章主要介绍了基于js实现复制内容到操作系统粘贴板过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • ES11屡试不爽的新特性,你用上了几个

    ES11屡试不爽的新特性,你用上了几个

    这篇文章主要介绍了ES11屡试不爽的新特性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 服务器端的JavaScript脚本 Node.js 使用入门

    服务器端的JavaScript脚本 Node.js 使用入门

    触爪伸向传说中的Server-Side Javascrpt。后端JS最出名无疑是Ryan Dahl的node.js，另一个是aptana IDE提供商搞出的jaxer，这里讨论node.js的使用
    2012-03-03
  • JavaScript设计模式策略模式案例分享

    JavaScript设计模式策略模式案例分享

    这篇文章主要介绍了JavaScript设计模式策略模式案例分享，策略设计模式就是指一个问题匹配多个解决方法，不一定要用到哪一个，而且有可能随时增加多个方案
    2022-06-06
  • 微信小程序scroll-view的滚动条设置实现

    微信小程序scroll-view的滚动条设置实现

    这篇文章主要介绍了微信小程序scroll-view的滚动条设置实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 微信小程序+腾讯地图开发实现路径规划绘制

    微信小程序+腾讯地图开发实现路径规划绘制

    这篇文章主要介绍了微信小程序+腾讯地图开发实现路径规划绘制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 使用layui的layer组件做弹出层的例子

    使用layui的layer组件做弹出层的例子

    今天小编就为大家分享一篇使用layui的layer组件做弹出层的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论