jQuery加载在Javascript（js）文件中

这是一个应该加载jQuery的非常简单的脚本。我可以在Firebug脚本选项卡中看到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

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

你可能想看看Google的，其工作方式是告诉它加载一个外部js文件，然后注册一个回调函数，在加载该文件时执行

---

您可以通过回调来实现这一点，因为回调中的代码只有在浏览器完成当前文件的执行并移动到下一个文件后才会执行。但是，您不能让浏览器在运行时（即，当浏览器第一次执行文件内容时）从一个js文件切换到另一个js文件.

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

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

你可能想看看Google的，其工作方式是告诉它加载一个外部js文件，然后注册一个回调函数，在加载该文件时执行

---

您可以通过回调来实现这一点，因为回调中的代码只有在浏览器完成当前文件的执行并移动到下一个文件后才会执行。但是，您不能让浏览器在运行时（即，当浏览器第一次执行文件内容时）从一个js文件切换到另一个js文件.

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

---

示例2之所以有效，是因为您动态添加了两个文件，并且它们按添加顺序被向下推到了底部，因此jQuery源代码执行，然后它执行jQuery代码。

当您动态添加脚本文件时，该文件直到剩下的javascript完成后才会执行已执行；因此，在示例中，一个jQuery源被下推到jQuery代码下面，因此返回未定义的

---

示例2之所以有效，是因为您动态添加了两个文件，它们按添加顺序向下推到底部，因此jQuery源代码执行，然后它执行jQuery代码。

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

当您使用两个包含时，它正在加载每个文件，因此在执行第二个文件时，第一个文件已经执行，这就是它工作的原因

---

您确实需要设置一个回调，以便jQuery加载完成后，它将执行文档准备任务，以及运行任何其他需要jQuery的代码。

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

当您使用两个包含时，它正在加载每个文件，因此在执行第二个文件时，第一个文件已经执行，这就是它工作的原因

---

您确实需要设置一个回调，以便在jQuery完成加载后，它将执行文档准备任务，并运行需要jQuery的任何其他代码。

如其他答案中所述，jQuery是异步加载的，因此在调用$（document）.ready（）时，jquery尚未加载。您可以通过将自己的代码添加到脚本元素的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');

请看下面的示例：

---

正如其他答案中所解释的，jquery是异步加载的，因此在调用$（document）.ready（）时，jquery是净加载的。您可以通过将自己的代码添加到脚本元素的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');

请看下面的示例：

---

+1-您需要使用脚本的

onload

处理程序来启动回调。+1-您需要使用脚本的

onload

处理程序来启动回调。