这是一个非常简单的脚本,可以加载jQuery。我可以在Firebug Scripts选项卡中看到jquery正在加载,但是当我尝试使用它时,我得到了'$ is not defined‘的错误。
//function to add scripts
function include(file)
{
var script = document.createElement('script');
script.src = file;
script.type = 'text/javascript';
script.defer = true;
document.getElementsByTagName('head').item(0).appendChild(script);
}
//add jQuery
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
//See if jQuery is working
$(document).ready(function() {
$('#internal').show();
})
////////////
//RETURNS: "$ is not defined $(document).ready(function() {"
奇怪的是,如果不尝试在相同的脚本中使用jQuery,而是加载另一个使用jQuery的js文件,它确实可以工作
//function to add scripts
function include(file)
{
var script = document.createElement('script');
script.src = file;
script.type = 'text/javascript';
script.defer = true;
document.getElementsByTagName('head').item(0).appendChild(script);
}
//add jQuery
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
//add my custom script that wants to use jQuery
include('scripts/testScript.js')
testScript.js
$(document).ready(function() {
$('#external').show();
})
我很感谢你对此的建议。
发布于 2010-11-19 17:56:35
我猜这是因为浏览器在执行完当前文件后,只会执行您添加的脚本节点中的JavaScript。
浏览器将在一个线程中执行当前脚本。当它到达脚本的末尾时,它将执行DOM中的下一个脚本。它无法停止运行一个脚本以跳转到下一个脚本。
你可能想看看谷歌的JavaScript loader。其工作方式是告诉它加载一个外部js文件,并注册一个回调以在加载该文件时执行。
您可以使用回调来完成此操作,因为回调中的代码只有在浏览器执行完当前文件并移到下一个文件之后才会执行。然而,你不能做的是让浏览器从一个js文件动态切换到另一个(即当它第一次执行文件的内容时)。
发布于 2010-11-19 18:07:46
正如在其他答案中所解释的,jquery是异步加载的,所以当您调用$(document).ready()时,jquery仍然是净加载的。您可以通过将您自己的代码添加到script-element的onload事件处理程序来避免这种情况:
function include(file){
var script = document.createElement('script');
script.src = file;
script.type = 'text/javascript';
script.defer = true;
script.onload= function(){
$(document).ready(function() {
//your code here
})
}
document.getElementsByTagName('head').item(0).appendChild(script);
}
//add jQuery
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
请看这里的示例:http://jsfiddle.net/CrReF/
发布于 2010-11-19 18:02:28
当您像这样动态添加脚本文件时,直到执行完javascript的其余部分,该文件才会执行;因此,在本例中,一个jQuery源代码被下推到jQuery代码下,因此返回未定义。
代码示例2之所以能够工作,是因为您有两个动态添加的文件,它们被按添加顺序下推到底部,因此jQuery源代码将执行,然后它将执行您的jQuery代码。
https://stackoverflow.com/questions/4227909
复制相似问题