如何动态加载外部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文件，相信一定会对大家的学习有很大的帮助。
相关推荐
-
动态加载js、css的简单实现代码
一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.
-
动态加载js文件简单示例
本文实例讲述了动态加载js文件的方法.分享给大家供大家参考,具体如下: function loadScript(url){ var hd = document.getElementsByTagName('head')[0], js = document.createElement('script'); js.src = url; js.type = "text/JavaScript"; if(js.addEventListener){ js.addEventListener("
-
jquery及js实现动态加载js文件的方法
本文实例讲述了jquery及js实现动态加载js文件的方法.分享给大家供大家参考,具体如下: 问题: 如果用jquery append直接加载script标签的话,会报错的.除了document.write外,还有没有其他的比较好的动态加载js文件的方法. 解决方法: 1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function(){ //加载test.js,成功后,并执
-
动态加载js、css的实例代码
一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.
-
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(windo
-
理解Javascript文件动态加载
Javascript文件动态加载一直是比较困扰的一件事情,像网络上传的比较常见的做法: function loadjs(fileurl){ var sct = document.createElement("script"); sct.src = fileurl; document.head.appendChild(sct); } 然后我们来测试一下结果: <html> <head> <link rel="stylesheet" typ
-
动态加载JavaScript文件的两种方法
这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval()实施代码.第二种是,动静创建一个script标签,配置其src属性,经过把script标签插入到页面head来加载js,相当于正在head中写了一个<script src="..."></script>,只可是这个script标签是用js动静创建的 比喻说是我们
-
js实现动态加载脚本的方法实例汇总
本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法,讨厌其中拷贝别人成果的人,也不加个原文的链接.哎!关键是最后一种方法还有点错误.经过两天的研究查阅资料,在这里和大家分享一下. 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在
-
不使用script导入js文件的几种方法
方法一:原生 adc.js内容如下: var hello = "H9"; html.html <script> var s = document.createElement("script"); s.src = "abc.js"; document.head.appendChild(s); s.addEventListener("load",function(){ // 等待s的load事件加载完响应,防止未加载完
-
JS 动态加载js文件和css文件 同步/异步的两种简单方式
/*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile
-
学习javascript文件加载优化
在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. 放置在BODY底部 为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到