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

JS加载器如何动态加载外部js文件

 更新时间：2016年05月26日 11:30:11   作者：孤傲苍狼  
这篇文章主要介绍了JS加载器如何动态加载外部js文件的相关资料,需要的朋友可以参考下

今天在网上找到了一个可以动态加载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')[].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-...js",function(){
alert("动态加载的是jquery-...js");
$(function(){
alert("jquery-...js动态加载完成之后做的处理操作");
});
}); 
}else{
MiniSite.JsLoader.load("js/jquery-...js",function(){
alert("动态加载的是jquery-...js");
$(function(){
alert("jquery-...js动态加载完成之后做的处理操作");
});
});
}
</script>
</head>
<body>
</body>
</html>

测试结果如下：

您可能感兴趣的文章:

相关文章

  • layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法

    layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法

    今天小编就为大家分享一篇layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript 函数节流详解及方法总结

    JavaScript 函数节流详解及方法总结

    这篇文章主要介绍了JavaScript 函数节流详解及实例的相关资料,需要的朋友可以参考下
    2017-02-02
  • javascript实现用户管理系统

    javascript实现用户管理系统

    这篇文章主要为大家详细介绍了javascript实现用户管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 微信小程序实现全局状态管理的方法整理

    微信小程序实现全局状态管理的方法整理

    已知微信小程序中如果要做到全局状态共享，常用的有四种方式，分别是globalData、本地缓存、mobx-miniprogram和westore，本文将带大家看看mobx-miniprogram是如何实现的小程序的全局状态管理，需要的可以收藏一下
    2023-06-06
  • js中对象和面向对象与Json介绍

    js中对象和面向对象与Json介绍

    今天小编就为大家分享一篇关于js中对象和面向对象与Json介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • JavaScript分页组件使用方法详解

    JavaScript分页组件使用方法详解

    这篇文章主要为大家详细介绍了JavaScript分页组件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • webpack打包优化的几个方法总结

    webpack打包优化的几个方法总结

    这篇文章主要介绍了webpack打包优化的几个方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 微信小程序用户后台定位及录音授权及请求示例

    微信小程序用户后台定位及录音授权及请求示例

    这篇文章主要为大家介绍了微信小程序用户后台定位及录音授权及请求示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-04-04
  • 基于JS实现的倒计时程序实例

    基于JS实现的倒计时程序实例

    这篇文章主要介绍了基于JS实现的倒计时程序,实例分析了javascript实现倒计时计数的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-07-07
  • webpack打包时如何修改文件名的实现示例

    webpack打包时如何修改文件名的实现示例

    本文主要介绍了webpack打包时如何修改文件名的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06

最新评论