问在Javascript ( js )文件中加载的jQuery
EN

Stack Overflow用户

提问于 2010-11-19 17:54:22

回答 4查看 666关注 0票数 1

这是一个非常简单的脚本，可以加载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();
})

我很感谢你对此的建议。

javascript

jquery

回答 4

Stack Overflow用户

发布于 2010-11-19 17:56:35

我猜这是因为浏览器在执行完当前文件后，只会执行您添加的脚本节点中的JavaScript。

浏览器将在一个线程中执行当前脚本。当它到达脚本的末尾时，它将执行DOM中的下一个脚本。它无法停止运行一个脚本以跳转到下一个脚本。

你可能想看看谷歌的JavaScript loader。其工作方式是告诉它加载一个外部js文件，并注册一个回调以在加载该文件时执行。

您可以使用回调来完成此操作，因为回调中的代码只有在浏览器执行完当前文件并移到下一个文件之后才会执行。然而，你不能做的是让浏览器从一个js文件动态切换到另一个(即当它第一次执行文件的内容时)。

票数 5

Stack Overflow用户

发布于 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');