动态加载js

参考地址:
1、http://www.jb51.net/article/48697.htm
案例git地址:
1、https://github.com/yuhaizr/htmlexample/tree/v0.0.1

jquery 动态加载js

1、使用jquery方法 getScript
jQuery.getScript("js/20160831.js")
.done(function() {
test(); //test 方法在 js/20160831.js 中定义
/* 耶,没有问题,这里可以干点什么 */
})
.fail(function() {
/* 靠,马上执行挽救操作 */
});
2、动态生成<script>标签
loadjs("js/20160831.js");
test();
//方法二
function loadjs(file){ 
var head = $('head').remove('#loadscript');
console.log(head);
$("<script>"+"</scr"+"ipt>")
.attr({src:file,type:'text/javascript',id:'load'})
.appendTo(head);
}
3、zepto动态加载js
$(function(){
$.getScript("js/20160831.js",function(){
test();
});
});
(function() {
/**
* 动态加载js文件
* @param  {string}   url      js文件的url地址
* @param  {Function} callback 加载完成后的回调函数
*/
var _getScript = function(url, callback) {
var head = document.getElementsByTagName('head')[0],
js = document.createElement('script');
js.setAttribute('type', 'text/javascript'); 
js.setAttribute('src', url); 
head.appendChild(js);
//执行回调
var callbackFn = function(){
if(typeof callback === 'function'){
callback();
}
};
if (document.all) { //IE
js.onreadystatechange = function() {
if (js.readyState == 'loaded' || js.readyState == 'complete') {
callbackFn();
}
}
} else {
js.onload = function() {
callbackFn();
}
}
}
//如果使用的是zepto,就添加扩展函数
if(typeof(Zepto) != 'undefined'){
$.getScript = _getScript;
}
})();

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注