脚本不执行动态生成的JQuery脚本标记

我在外部JS文件（即：test.js）中有以下代码;如果它检测到JQuery源不在那里，它会创建一个指向JQuery源的附加脚本标记。该代码实际上创建脚本标记并将其插入创建的实际脚本之前：脚本不执行动态生成的JQuery脚本标记

if (typeof(jQuery) == "undefined") { 
var head = document.getElementsByTagName("head")[0]; 
// get any and all script tags 
var scripts = document.getElementsByTagName("script"); 
// the actual script call the actions (ie: this one "test.js") 
thisScript = scripts[scripts.length - 1]; 
// create element 
var script = document.createElement("script"); 
script.setAttribute("type", "text/javascript"); 
script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"); 
head.insertBefore(script,thisScript); 
}

上述工作正常。但是，我遇到的问题是，一旦创建了JQuery源脚本标记，“test.js”中的其他代码就无法工作。就好像代码无法访问JQuery函数（或者不知道JQuery在那里）。

因此，在“test.js”下面的代码不起作用：

$(document).ready(function() { 

// ... 

});

我根据萤火虫与FF 12得到的错误是：“$没有定义” 任何想法至于为什么会发生这种情况，或者我可以如何解决它？

注：我知道我可以只需将JQuery的目标页面上;然而，这不是一个选项，代码必须能够检测到JQuery是否存在;如果不是，则创建指向JQuery的脚本标记并运行Jquery代码。

来源

2012-05-08 C King

当您插入脚本标签手动像你正在做的，该脚本异步加载。这意味着页面的其他部分不会等待该脚本加载。

这比如果脚本标签存在于页面的源，因为在这种情况下，脚本将同步加载和页面的其他部分将不执行该脚本被加载之后，直到不同。

这样做的结果是，你的页面的JavaScript是动态插入脚本标签之前执行，其余已被加载，解析和运行。因此，您正试图在安装jQuery之前使用jQuery。

我所知道的两个选项为您解决问题：

更改您的jQuery脚本标签插入的东西，负载同步。我知道要做到这一点的唯一方法是使用document.write()将新脚本标记写入文档，而不是像插入到头部一样。用document.write()添加到文档中的东西会被同步处理。
继续像你一样动态地插入脚本，但添加一个监视事件，以便知道何时脚本已成功加载，并且只运行使用jQuery的初始化代码后，您会得到jQuery已发出的通知成功加载。

还有脚本加载库（例如require.js）会为您做第二个选项。

来源

2012-05-08 21:44:00 jfriend00

太棒了！初始化代码？拍我的脑袋。不知道为什么它没有发生在我身上。很好的答案。谢谢！ –

尝试使用if-then控件，onload事件，settimeout和其他几种方法来执行初始化代码，但没有运气;仍然获得'$未定义'。唉，我有限的编码经验只能带我到目前为止。我真的很感激一些指导。不要抓住require.js的东西。再次感谢您的帮助。 –

好的。阅读hunlock dot com上的一篇文章，并找出它。在函数中包装'$ document.ready（...'，并使用变量'script'的onload事件调用它。再次感谢您的帮助。 –

这听起来像您有加载顺序的问题。 '$ is not defined'错误被触发，因为jQuery尚未加载。然后你加载jQuery。这当然不会重新加载你的第一个脚本，所以错误的立场。

来源

2012-05-08 21:43:08

-1

这已经在这里找到答案：Check if jQuery is included in Header (Joomla)

if (typeof jQuery == 'undefined') { 
    var head = document.getElementsByTagName("head")[0]; 
    script = document.createElement('script'); 
    script.id = 'jQuery'; 
    script.type = 'text/javascript'; 
    script.src = 'js/jquery.js'; 
    head.appendChild(script); 
}

来源

2012-05-08 21:43:34 lucuma

你也可以使用类似require.js的东西。 http://requirejs.org/docs/jquery.html – lucuma

脚本不执行动态生成的JQuery脚本标记

回答

相关问题