在js中加载jQuery,然后执行依赖于它的脚本

Question

我有一个独特的问题 -

我正在设计一个创建小部件的Web应用程序,然后用户可以将这些小部件嵌入到他们自己的页面中(主要是博客文章).我希望他们只需要嵌入一行,所以我只是将该行作为include语句,从我的服务器上取下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函数.麻烦的是,这不起作用!每次运行它时,我都会收到错误,即未定义变量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(ready)事件,可用于将其他脚本与它们耦合.

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可用时,将完全调用该函数.您的代码是失败证明并快速启动.