使用jQuery包含一个JS文件并等待它加载[重复]答案

【问题标题】：Include a JS file using jQuery and wait till it loaded [duplicate]使用jQuery包含一个JS文件并等待它加载[重复]
【发布时间】：2014-06-20 18:15:41
【问题描述】：

我想在运行时包含一些脚本，浏览器必须等到脚本加载或依赖解决。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

尝试类似的东西

    $.when(
        $.getScript( "sample.js" ),
        $.getScript( "simple.js" ),
        $.getScript( "jquery.js" ),
        $.Deferred(function( deferred ){
        $( deferred.resolve );
       })
       ).done(function(){
            //place your code here, the scripts are all loaded
    });

【讨论】：

+1，但我会删除 $.Deferred 位，它对答案没有任何帮助，只是让事情变得混乱。例如，只显示$.when 和$.getScripts 和done。
另外，“试试这个”风格的答案通常没有用。总是说出你展示的内容，以及为什么。 API 文档的链接通常也是最好的。
使用 jQuery 的 $.when + $.getScript 来获取一个名为 jquery.js 的脚本似乎有点傻，虽然 :-P

【解决方案2】：

您可以添加script 元素并附加src 和document.createElement 等属性并将其放置到您的DOM 中

【讨论】：

【解决方案3】：

您可以通过$.getScript 检索每个脚本，它返回一个jqXHR 对象，它也是一个Promise。

如果您需要按顺序获取脚本，您可以像这样将它们链接在一起：

$.getScript("script1.js")
    .then(function() { $.getScript("script2.js"); })
    .then(function() { $.getScript("script3.js"); })
    .then(function() {
        // They're all loaded, do your stuff
    });

如果你加载它们的顺序无关紧要，但你只需要知道它们什么时候都在那里，你可以并行加载它们，然后在它们全部完成后使用$.when被调用：

$.when(
    $.getScript("script1.js"),
    $.getScript("script2.js"),
    $.getScript("script3.js")
).then(function() {
    // They're all loaded, do your stuff
});

【讨论】：

【解决方案4】：

您可以使用带有 getScript() 的 Promise 并等待所有脚本加载完毕，例如：

$.when(
    $.getScript( "/mypath/myscript1.js" ),
    $.getScript( "/mypath/myscript2.js" ),
    $.getScript( "/mypath/myscript3.js" ),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(function(){

    //do something

});

【讨论】：

这看起来像是 Manjunath 答案的精确副本，直到不相关的部分。

【解决方案5】：

创建脚本

  var head= document.getElementsByTagName('head')[0];
  var script= document.createElement('script');
  script.type= 'text/javascript';
  script.src= 'your source';
  script.onreadystatechange= function () {
      if (this.readyState == 'complete') useScript();
  }
  script.onload= useScript;
  head.appendChild(script);

然后

function useScript(){
//use your script here
}

通过这种方式，您可以在头脑中添加一个脚本标签，并设置一个函数以在加载此脚本时调用 (useScript)。

请注意，onreadystatechange 处理程序仅适用于 IE。 onload 处理程序适用于其他浏览器

【讨论】：