如何知道是否加载了JavaScript（脚本）？

Question

我尝试编写一个JavaScript函数来加载一个js脚本（ src ）并在加载脚本时执行一些回调。

我也看看是否已经存在具有相同src的脚本。

我的问题是如果脚本已经加载，则不会执行回调。 那是NOK。

如何知道脚本是否已加载？

importScript: (function (head) {

    function loadError(error) {
        throw new URIError("The script " + 
                            error.target.src + " is not accessible.");}

    return function (url, callback) {
        var existingScript = document.querySelectorAll("script[src='" + 
                             url + "']");
        var isNewScript = (existingScript.length == 0);
        var script;
        if (isNewScript) {
            script = document.createElement("script")
            script.type = "text/javascript";
        }
        else {
            script = existingScript[0];
        }
        script.onerror = loadError;
        if (script.readyState) { //IE
            script.onreadystatechange = function () {
                if (script.readyState == "loaded" || 
                    script.readyState == "complete") {
                    script.onreadystatechange = null;
                    if (callback) {
                        callback(); }
                }
            };
        } else { // others than IE
            script.onload = callback; }

        if (isNewScript) {
            script.src = url;
            head.appendChild(script); }
    }
})(document.head || document.getElementsByTagName("head")[0])

据我了解， script.readyState == "loaded" || script.readyState == "complete" script.readyState == "loaded" || script.readyState == "complete" 只适用于IE ，不适用于其他浏览器......

用法：

importScript("myScript1.js");
importScript("myScript2.js", /* onload function: */ 
            function () { alert("The script has been OK loaded."); });

Answer 1

我推荐jQuery，它很容易。 生活对于像你自己这样的事情来说太短了（你会浪费时间来支持所有的浏览器）。

$.ajax({
  url: "/script.js",
  dataType: "script",
  success: function() {
    console.log("script loaded");
  }
});

编辑：
它更容易（例如来自jQuery文档）：

$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
  console.log(data); // Data returned
  console.log(textStatus); // Success
  console.log(jqxhr.status); // 200
});

您还可以完成链接 ，但无法进行其他回调：

$.getScript("ajax/test.js")
  .done(function(script, textStatus) {
    console.log(textStatus);
  })
  .fail(function(jqxhr, settings, exception) {
    console.log("loading script failed.");
  });

异步加载jQuery

<script src="path/to/jquery"></script>
<script>
function wait(method) {
    if (window.$) {
        method();
    } else {
        setTimeout(function () { wait(method); }, 100); // check every 100ms
    }
}

// wait for jQuery
wait(function() {
    // jQuery has loaded!
    $("#foo").doSomething();

    // you can now load other scripts with jQuery:
    $.getScript("ajax/test.js")
      .done(function(script, textStatus) {
        console.log(textStatus);
      })
      .fail(function(jqxhr, settings, exception) {
        console.log("loading script failed.");
      });
}
</script>

Answer 2

那么检查脚本是否加载的最安全的方法是你可以在脚本末尾添加一个简单的回调。 如果存在，可以调用哪些数据也可以传递。

if(window.loaded){
  window.loaded(params);
}

一旦脚本加载，它将执行此方法，您可以在父脚本中声明该方法将被调用。

您还可以在正文上触发事件并在其他父代码中侦听该事件。

Answer 3

基于Luca Steeb的方法，我将解决方案简化为两个脚本标签，对于SPA应用程序，index.html非常紧凑，具有：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Simplified INDEX</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="/bootloader.js"></script>
</head>

<body>
</body>

</html>

bootloader.js，结合Luca的想法并使用jquery加载css ：

function loadScripts() {
  // jQuery has loaded!
  console.log("jquery is loaded");

  // you can now load other scripts and css files with jQuery:
  $.when($.getStylesheet('css/main.css'), $.getScript('js/main.js'))
    .then(function () {
       console.log('the css and js loaded successfully and are both ready');
    }, function () {
        console.log('an error occurred somewhere');
    });
}

function patchGetStylesheet($) {
  $.getStylesheet = function (href) {
    var $d = $.Deferred();
    var $link = $('<link/>', {
      rel: 'stylesheet',
      type: 'text/css',
      href: href
    }).appendTo('head');
    $d.resolve($link);
    return $d.promise();
  };
}

function wait(method) {
  if (window.$) {
    patchGetStylesheet(window.$);
    method();
  } else {
    setTimeout(function () {
      wait(method);
    }, 100); // check every 100ms
  }
}

// wait for jQuery
wait(loadScripts);

对于bootloader.js，它可能会被缩小，被禁止....使用webpack，...

我们不会通过使用jquery解决运行时依赖性来向index.html添加代码。

如何知道是否加载了JavaScript（脚本）？

问题描述

3 个解决方案

解决方案1
6 已采纳 2015-03-31 18:42:44

异步加载jQuery

解决方案2
1 2015-03-31 18:29:13

解决方案3
0 2019-03-22 11:58:19

如何知道是否加载了JavaScript（脚本）？

问题描述

3 个解决方案

解决方案1 6 已采纳 2015-03-31 18:42:44

异步加载jQuery

解决方案2 1 2015-03-31 18:29:13

解决方案3 0 2019-03-22 11:58:19

解决方案1
6 已采纳 2015-03-31 18:42:44

解决方案2
1 2015-03-31 18:29:13

解决方案3
0 2019-03-22 11:58:19