我有 initializor.js ,其中包含以下内容:
if(typeof jQuery=='undefined')
{
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = 'jquery.js';
headTag.appendChild(jqTag);
}
然后我将该文件包含在另一页的某个地方。代码检查是否加载了jQuery,如果不加载,则将其添加到Head标记。
然而,jQuery没有初始化,因为在我的主文档中,我声明了一些事件来测试它。我还尝试在支票下面编写一些jQuery代码,Firebug说“jQuery未定义”。这是一种方法吗? Firebug在head标签中显示jquery包含标签!
另外,我可以动态地将代码添加到$(document).ready()事件中吗?或者只是将一些Click事件添加到几个元素中?
答案 0 :(得分:46)
当您异步加载jQuery时(通过将其附加到<head>
),jQuery不会立即可用。您必须向脚本(jqTag
)添加一个onload侦听器,以检测它何时加载,然后运行您的代码。
e.g。
function myJQueryCode() {
//Do stuff with jQuery
}
if(typeof jQuery=='undefined') {
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = 'jquery.js';
jqTag.onload = myJQueryCode;
headTag.appendChild(jqTag);
} else {
myJQueryCode();
}
答案 1 :(得分:29)
要包含jQuery,您应该使用它:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery.js">\x3C/script>')</script>
它使用Google CDN,但提供了一个后备和一个协议相对URL。
注意:务必将版本号更改为最新版本
如果定义了window.jQuery
,它将不会继续读取该行,因为它是一个或已经包含一个真值,如果不是它(文档。)写入值
见:theHTML5Boilerplate
另外:如果没有定义jQuery,你忘记了引号:
typeof window.jQuery === "undefined" //true
typeof window.jQuery == undefined //false ,this is wrong
你也可以:
window.jQuery === undefined //true
答案 2 :(得分:9)
重构Adam Heath's answer(这是更易读的IMO)。最重要的是,你需要在jQuery完成加载后运行jQuery代码。
jQueryCode = function(){
// your jQuery code
}
if(window.jQuery) jQueryCode();
else{
var script = document.createElement('script');
document.head.appendChild(script);
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
script.onload = jQueryCode;
}
或者您也可以将其包装在函数中以更改代码的顺序
function runWithJQuery(jQueryCode){
if(window.jQuery) jQueryCode();
else{
var script = document.createElement('script');
document.head.appendChild(script);
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
script.onload = jQueryCode;
}
}
runWithJQuery(function jQueryCode(){
// your jQuery code
})
或者,如果您使用异步功能,则可以使用await
代替,
if(!window.jQuery){
var script = document.createElement('script');
document.head.appendChild(script);
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
await script.onload
}
// your jQuery code here
答案 3 :(得分:2)
YepNope加载器可用于有条件地加载脚本,具有非常好的,易于阅读的语法,他们在他们的网站上有一个这样的例子。
您可以从their website获取。
从他们的网站上摘录的例子:
yepnope([{
load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
complete: function () {
if (!window.jQuery) {
yepnope('local/jquery.min.js');
}
}
}
答案 4 :(得分:0)
这个网站代码解决了我的问题。
function loadjQuery(url, success){
var script = document.createElement('script');
script.src = url;
var head = document.getElementsByTagName('head')[0],
done = false;
head.appendChild(script);
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done = true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
}
if (typeof jQuery == 'undefined'){
loadjQuery('http://code.jquery.com/jquery-1.10.2.min.js', function() {
// Write your jQuery Code
});
} else {
// jQuery was already loaded
// Write your jQuery Code
}
http://99webtools.com/blog/load-jquery-if-not-already-loaded/
答案 5 :(得分:0)
这是旧帖子,但我创建了一个在不同地方测试的可行解决方案。
<script type="text/javascript">
(function(url, position, callback){
// default values
url = url || 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
position = position || 0;
// Check is jQuery exists
if (!window.jQuery) {
// Initialize <head>
var head = document.getElementsByTagName('head')[0];
// Create <script> element
var script = document.createElement("script");
// Append URL
script.src = url;
// Append type
script.type = 'text/javascript';
// Append script to <head>
head.appendChild(script);
// Move script on proper position
head.insertBefore(script,head.childNodes[position]);
script.onload = function(){
if(typeof callback == 'function') {
callback(jQuery);
}
};
} else {
if(typeof callback == 'function') {
callback(jQuery);
}
}
}('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', 5, function($){
console.log($);
}));
</script>
您可以找到HERE。
的说明