Question

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

<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。每当执行此代码时，我都会收到错误＆＃39; $未定义＆＃39;。我的回调例程什么都不做 - 只是想忽略回调，以便文件完全加载。

我知道我在这里有些不对劲 - 我只是不理解它。

谢谢！

更新

似乎在脚本完全加载之前调用了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");
 });
}

动态加载jquery - $（document）.ready（）给'$未定义'

2 个答案: