尽管加载了脚本,但未定义 jQuery



我知道这个话题被大量讨论过,但我似乎没有找到解决方案。

我尝试在回调中加载多个库,如下所示:

var loadjQuery = function (){
console.log('loadjQuery');
try {
jQuery();
loadLocalStorage();
} catch(e) {
var jq = document.createElement('script');
jq.type = 'text/javascript';
jq.src = '//myurl/assets/js/lib/jquery-2.1.1.js';
jq.onload = function (){ $.noConflict();};
document.getElementsByTagName('head')[0].appendChild(jq);
try {
jQuery();
loadLocalStorage();
} catch (e) {
jq.src = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
jq.onload = function (){ $.noConflict();};
document.getElementsByTagName('head')[0].appendChild(jq);
loadLocalStorage();
}
}   
}
var loadCookie = function (){
console.log('loadCookie');
try { 
jQuery.cookie();
} catch(e) { 
var cook = document.createElement('script'); 
cook.type = 'text/javascript';
cook.src = '//myurl/assets/js/lib/jquery.cookie.js';
document.getElementsByTagName('head')[0].appendChild(cook); 
}
}
var loadLocalStorage = function (){
console.log('loadLocalStorage');
try { 
jQuery.localStorage();
loadCookie();
} catch(e) { 
var ls = document.createElement('script'); 
ls.type = 'text/javascript';
ls.src = '//myurl/assets/js/lib/jquery.storage.js';
document.getElementsByTagName('head')[0].appendChild(ls);
loadCookie();
}
}
loadjQuery ();

这些文件都加载在网络 200 响应中。代码也会加载。 但是当我尝试使用代码时,我得到:

jQuery is not defined

例如.js如果我转到文件 jquery.storage 中的错误,我会在以下行收到错误:

}(jQuery, window, document));

我仔细检查了这个主题的所有答案。将脚本放在页眉和页脚中。设置延期="延期"等'...我错过了什么?

好吧,这太愚蠢了。 因为 js 是异步工作的,尽管所有脚本都以正确的顺序加载,我可以在控制台中使用 jQuery,并且在文档准备就绪后,库没有初始化,因为此时尚未加载 jQuery。

诀窍是在 onload 函数中添加回调,如下所示:

var loadjQuery = function (){
console.log('loadjQuery');
try {
jQuery();
loadLocalStorage();
} catch(e) {
var jq = document.createElement('script');
jq.type = 'text/javascript';
jq.onload = function (){ 
$.noConflict();
loadLocalStorage();
loadCookie();
};
jq.src = '//myurl/assets/js/lib/jquery-2.1.1.js';
document.getElementsByTagName('head')[0].appendChild(jq);   
}   

}

最新更新