动态加载 jquery - $(document).ready() 给出“$ 未定义”

Question

我有一种情况，通过检查标志，我需要将 1 个或多个 .js 文件动态加载到页面。我希望在页面代码开始执行之前加载并准备好所有这些文件。 .js 文件似乎正确加载，但是 $(document).ready(function(){}); 上出现错误在页面上。这是我的代码的“瘦”版本：

<script type="text/javascript">
 if (typeof ScriptLoaded == 'undefined') {
   var scripts = ["js/jquery-1.6.2.min.js"];
   for (i=0; i<scripts.length; i++) {
      var head = document.getElementsByTagName('head')[0],
      script = document.createElement('script');
      script.type = "text/javascript";
      script.src = scripts[i];
      script.onload = oCallback();
      script.onreadystatechange = function() {
         if (this.readyState == 'loaded' || this.readyState == 'complete') {
            oCallback();
         }
      }
      head.appendChild(script)
   }
 }

 $(document).ready(function() {
   alert("ready");
 });

 function oCallback() {
 }
</script>

我在这个例程中加载了超过 1 个 .js 文件，但为了简单起见，这里只指定了 jQuery。每当执行此代码时，我都会收到错误“$ 未定义”。我的回调例程什么都不做 - 只是想忽略回调以便完全加载文件。

我知道我这里有问题 - 我只是不明白。

谢谢！

---

更新

似乎在脚本完全加载之前调用了 oCallback() 函数，或者代码完全插入到 DOM 中。经过反复试验，这似乎在 IE 和 FF 中都有效：

<script type="text/javascript">
 if (typeof ScriptLoaded == 'undefined') {
   var scripts = ["js/jquery-1.6.2.min.js"];
   for (i=0; i<scripts.length; i++) {
      var head = document.getElementsByTagName('head')[0],
      script = document.createElement('script');
      script.type = "text/javascript";
      script.src = scripts[i];
      script.onload = oCallback();
      script.onreadystatechange = function() {
         if (this.readyState == 'loaded' || this.readyState == 'complete') {
            oCallback();
         }
      }
      head.appendChild(script)
   }
 }

 function oCallback() {
 }

 function oReady() {
     $(document).ready(function() {
        alert("ready");
     });
 }
 window.onload = oReady;
</script>

Answer 1

你必须这个代码

$(document).ready(function() { alert("ready"); });

加载脚本后写入回调。

或者尝试在加载所有外部js后编写一个全局回调运行：

<script type="text/javascript">
 if (typeof ScriptLoaded == 'undefined') {
   var scripts = ["js/jquery-1.6.2.min.js"];
   for (i=0; i<scripts.length; i++) {
      var head = document.getElementsByTagName('head')[0],
      script = document.createElement('script');
      script.type = "text/javascript";
      script.src = scripts[i];
      script.onload = oCallback();
      script.onreadystatechange = function() {
         if (this.readyState == 'loaded' || this.readyState == 'complete') {
            oCallback();

            if(i === scripts.length - 1)
                  globalCallback();
         }
      }
      head.appendChild(script)
   }
 }

 function oCallback() {
 }

 function globalCallback() {
     $(document).ready(function() {
        alert("ready");
     });
 }
</script>

Answer 2

当您尝试动态加载脚本时，必须通过 http 获取它。此请求被放入 javascript 任务队列中。当前任务找到后继续执行代码。找到的下一行代码是对$ 的调用（请记住，此时 jQuery 仍在任务队列中加载）。因此，$ 未定义。不久之后，jQuery 完成加载，队列中的任务执行其代码，调用您的回调函数。

为了使用$，您必须等待任务完成执行，为此您应该将该代码放入您的回调中。

function oCallback() {
 $(document).ready(function() {
  alert("ready");
 });
}