Fatal编程技术网
  • javascript/
  • 如何知道是否加载了JavaScript（脚本）？

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

javascript html

如何知道是否加载了JavaScript（脚本）？,javascript,html,Javascript,Html,我尝试编写一个JavaScript函数，加载js脚本（src），并在加载脚本时执行一些回调 我还查看是否已经存在具有相同src的脚本 我的问题是，如果脚本已经加载，则不会执行回调。那是诺克 如何知道脚本是否已加载？ importScript: (function (head) { function loadError(error) { throw new URIError("The script " + erro

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

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

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

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

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”
只能对IE运行，对其他浏览器不起作用

用法：

importScript("myScript1.js");
importScript("myScript2.js", /* onload function: */ 
            function () { alert("The script has been OK loaded."); });
检查脚本是否已加载的最安全的方法是，可以在脚本末尾添加一个简单的回调。如果存在，可以调用它并传递一些数据

if(window.loaded){
  window.loaded(params);
}
脚本加载后，它将执行此方法，您可以在将被调用的父脚本中声明此方法

您还可以在body上触发一个事件，并在其他父代码中侦听该事件。

我推荐jQuery，它非常简单。对于自己编写这样的代码来说，生命太短暂了（你将浪费数小时来支持所有浏览器）

编辑：
这更容易（例如：

您还可以将“完成”和“失败”链接到其他回调：

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

函数等待（方法）{
如果（窗口$）{
方法（）；
}否则{
setTimeout（函数（）{wait（method）；}，100）；//每100ms检查一次
}
}
//等待jQuery
等待（函数（）{
//jQuery已加载！
$（“foo”）.doSomething（）；
//现在可以使用jQuery加载其他脚本：
$.getScript（“ajax/test.js”）
.done（函数（脚本、文本状态）{
console.log（textStatus）；
})
.失败（功能（jqxhr、设置、异常）{
log（“加载脚本失败”）；
});
}
基于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已加载！
log（“jquery已加载”）；
//现在，您可以使用jQuery加载其他脚本和css文件：
$.when（$.getStylesheet（'css/main.css'），$.getScript（'js/main.js'））
.然后（函数（）{
log（'css和js加载成功并且都准备就绪'）；
}，函数（）{
log（'某个地方发生了错误'）；
});
}
函数patchGetStylesheet（$）{
$.getStylesheet=函数（href）{
var$d=$.Deferred（）；
变量$link=$（''{
rel:'样式表'，
键入：“text/css”，
href:href
}).appendTo（“head”）；
$d.resolve（$link）；
返回$d.promise（）；
};
}
函数等待（方法）{
如果（窗口$）{
patchGetStylesheet（窗口$）；
方法（）；
}否则{
setTimeout（函数（）{
等待（方法）；
}，100）；//每100毫秒检查一次
}
}
//等待jQuery
等待（加载脚本）；
对于bootloader.js，它可以缩小、对象化…使用webpack

通过使用jquery解决运行时依赖关系，我们将不再向index.html添加代码。

if（isNewScript）{script.src=…}else{callback（false）；}
，并在
回调中检查传递的参数，以检测脚本是否已实际加载？这是否回答了您的问题？这是一个更好的解决方案。谢谢。我想知道如何检查脚本是否已加载，而不是如何加载脚本，因为我不确定当前是否加载了jQuery，所以我更喜欢纯JavaScript请检查我的答案，我也添加了一些代码来异步加载jquery。非常方便：只需添加一个带有poper src的脚本标记，并在加载的脚本末尾启动一个回调。谢谢！

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



<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>



<!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>



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);