Question

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

我很欣赏这方面的任何建议。

Answer 1

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

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

您可能需要查看Google的JavaScript loader。可行的方法是告诉它加载外部js文件，并注册一个回调函数，以便在加载该文件时执行。

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

Answer 2

正如其他答案所解释的那样，jquery是异步加载的，所以当你调用$（document）.ready（）时，jquery已经加载了net。您可以通过将自己的代码添加到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/

Answer 3

当您正在动态添加脚本文件时，在执行其余的javascript之前不会执行该文件;因此，在示例中，一个jQuery源被下推到jQuery代码下面，因此返回undefined。

代码示例二的原因是因为你有两个动态添加的文件，它们按照添加的顺序被推到底部，所以jQuery源执行，然后它执行你的jQuery代码。

Answer 4

因此，通过使用javascript加载jQuery，您将异步加载文件。您的代码将开始加载jQuery，然后继续调用您的document.ready代码，这将失败，因为jQuery尚未完成加载或开始执行。

当你使用两个包含它时，它正在加载每个文件，所以当第二个文件被执行时，第一个文件已被执行，这就是它的工作原理。

你真的需要设置一个回调，这样一旦jQuery完成加载，它将执行文档就绪任务以及运行任何其他需要jQuery的代码。

jQuery在Javascript（js）文件中加载

4 个答案: