javascript - 在一个js中加载jQuery，然后执行一个依赖于它的脚本

Question

我有一个独特的问题-

我正在设计一个 Web 应用程序，它可以创建小部件，然后用户可以将这些小部件嵌入到他们自己的页面(主要是博客文章)中。我希望他们只需要嵌入一行，所以我只是将该行作为包含语句，以从我的服务器中提取 Javascript。

问题是，我正在使用 jQuery 构建小部件代码，我需要加载 jQuery 插件，因为我显然不知道我的用户是否可以使用它。我想“这应该很简单”....

function includeJavaScript(jsFile) {
  var script = document.createElement('script');
  script.src = jsFile;
  script.type = 'text/javascript';
  document.getElementsByTagName('head')[0].appendChild(script);
}

includeJavaScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
jQuery();

因此，我将 jQuery 文件附加到头部，然后尝试运行 jQuery 函数。问题是，这行不通!每次运行它时，我都会收到 undefined variable jQuery 的错误。我尝试了一些东西。我尝试将 jQuery 函数放在 onLoad 触发器中，以便整个页面(可能包括 jQuery 文件)在调用我的脚本之前加载。我尝试将 jQuery 函数放在一个单独的文件中，并在加载 jQuery lib 文件后加载它。但我觉得我遗漏了一些简单的东西——我是 jQuery 的新手，所以如果我遗漏了一些明显的东西，我深表歉意……

编辑

好的，我尝试了 digitalFresh 提供的建议，如下所示(使用 Safari 5，如果有帮助的话)，但我仍然得到同样的错误？

function test() {
    jQuery()
}

var script = document.createElement("script");
script.type = "text/javascript";
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
script.onload = test(); //execute
document.body.appendChild(script);

编辑

好吧，根据 Brendan 的临时建议，我终于让它工作了，方法是将调用 ITSELF 放在“onload”处理程序中，如下所示:

function addLoadEvent(func) { 
      var oldonload = window.onload; 
      if (typeof window.onload != 'function') { 
        window.onload = func; 
      } else { 
        window.onload = function() { 
          if (oldonload) { 
            oldonload(); 
          } 
          func(); 
        } 
    } 
} 
addLoadEvent( function() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
    document.body.appendChild(script);
    jQuery();
});

此时，如您所见，我什至不必将其放入“onload”中 - 它就可以正常工作。虽然我不得不承认，但我仍然不明白为什么它会起作用，这让我很困扰......

Answer 1

您最终使用的解决方案有效，但启动缓慢，并且不是 100% 的失败证明。如果有人重写 window.onload 你的代码将不会运行。当加载页面上的所有内容(包括图像)时， window.onload 也会发生，这不是您想要的。您不希望您的脚本等待那么久。

幸运的是，<script> 元素有自己的 onload(就绪)事件，可用于将其他脚本与其耦合。

function include(file, callback) {
  var head      = document.getElementsByTagName('head')[0];
  var script    = document.createElement('script');
  script.type   = 'text/javascript';
  script.src    = file;
  script.onload = script.onreadystatechange = function() {
    // execute dependent code
    if (callback) callback();
    // prevent memory leak in IE
    head.removeChild(script);
    script.onload = null;
  };
  head.appendChild(script);
}

include('http://ajax.googleapis.com/.../jquery.min.js', myFunction);

在这种情况下，该函数将在 jquery 可用时准确调用。您的代码是防故障的并且可以快速启动。