Javascript document.createElement（'；script'；）。。。使用一个回调添加两个脚本

我需要添加prototype，然后添加scriptaculous，并在加载完成后获得回调。我目前正在加载原型，如下所示：

var script = document.createElement("script");
script.src = "http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js";
script.onload = script.onreadystatechange = callback;
document.body.appendChild( script );

---

我可以通过链接回调来做到这一点，但这似乎是一个糟糕的做法（当我需要加载更多脚本时，我不希望有一个愚蠢的20个回调方法的链接）。想法？

我建议您使用一些小型装载机，它可以为您进行链式操作。例如，像这样的一个：

function loadScripts(array,callback){
    var loader = function(src,handler){
        var script = document.createElement("script");
        script.src = src;
        script.onload = script.onreadystatechange = function(){
            script.onreadystatechange = script.onload = null;
            handler();
        }
        var head = document.getElementsByTagName("head")[0];
        (head || document.body).appendChild( script );
    };
    (function run(){
        if(array.length!=0){
            loader(array.shift(), run);
        }else{
            callback && callback();
        }
    })();
}

此脚本应帮助您构建脚本标记，并在加载所有文件时调用回调。调用非常简单：

loadScripts([
   "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js",
   "http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"
],function(){
    alert('All things are loaded');
});

---

希望这会有所帮助

因为scriptaculous需要prototype，所以您必须使用任何加载这些脚本的方法来链接侦听器

有多种脚本加载器可用于以尽可能快的速度并行加载脚本，例如，但在这种情况下，没有一种会有多大帮助

---

如果您最终有10-20个脚本要加载，我建议您事先使用工具组合脚本。

由于Internet Explorer中存在错误，来自nemisj的递归加载程序在IE中无法正常工作。可以通过设置递归调用的延迟来解决，如：

function loadScripts(array,callback){  
    var loader = function(src,handler){  
        var script = document.createElement("script");  
        script.src = src;  
        script.onload = script.onreadystatechange = function(){  
          script.onreadystatechange = script.onload = null;  
          if(/MSIE ([6-9]+\.\d+);/.test(navigator.userAgent))window.setTimeout(function(){handler();},8,this);  
          else handler();  
        }  
        var head = document.getElementsByTagName("head")[0];  
        (head || document.body).appendChild( script );  
    };  
    (function(){  
        if(array.length!=0){  
                loader(array.shift(),arguments.callee);  
        }else{  
                callback && callback();  
        }  
    })();  
}  

函数装入脚本（数组，回调）{
var loader=函数（src，handler）{
var script=document.createElement（“脚本”）；
script.src=src；
script.onload=script.onreadystatechange=function（）{
script.onreadystatechange=script.onload=null；
if（/MSIE（[6-9]+\.\d+；/.test（navigator.userAgent））window.setTimeout（function（）{handler（）；}，8，this）；
else-handler（）；
}  
var head=document.getElementsByTagName（“head”）[0]；
（head | | document.body）.appendChild（script）；
};  
（函数（）{
如果（array.length！=0）{
加载器（array.shift（），arguments.callee）；
}否则{
callback&&callback（）；
}  
})();  
}  

当无法解释的问题发生时，这种小技巧通常是IE中的解决方案，这种情况太常见了。

您可以提示

.onload

和

.onerror

回调，然后使用等待所有承诺得到解决，然后继续执行依赖于这些脚本的操作

下面是一个例子：

const loadScript=url=>
新承诺（（解决、拒绝）=>{
常量脚本=document.createElement（“脚本”）；
script.src=url；
script.onload=解析；
script.onerror=e=>
拒绝（错误（`${url}未能加载`））
;
document.head.appendChild（脚本）；
})
;
常量脚本URL=[
"https://unpkg.com/htm",
"https://unpkg.com/axios@0.21.0/dist/axios.min.js“，
"https://cdnjs.cloudflare.com/ajax/libs/d3/6.3.1/d3.min.js",
// ...
];
Promise.all（scripturl.map（loadScript））
。然后（异步（）=>{
/*在这里使用您的脚本*/
log（“正在验证加载的脚本：”）；
axios.get（“http://jsonplaceholder.typicode.com/users");
log（d3.csvParse（“a，b\n3,4\n5,6”）；
consthtml=htm.bind（（t，p，…c）=>（{t，p，c}））；
log（html`helloworld！`）；
})
.catch（err=>console.error（err））
;为什么不将这些脚本添加到HTML中，而不是用JavaScript加载它呢？我正在制作一些代码，粘贴到其他人的HTML中，以嵌入我的东西。我只希望粘贴一个空div和对我的javascript文件的引用。@kdiegert:粘贴的js文件的引用：你的意思是通过
？是的，所以要粘贴的代码应该是：实际上，这个场景正是LABjs设计用来解决的。aysnc.parallel或async.series可能有助于处理这个
参数。被调用方在严格模式下抛出一个错误：从“
参数。被调用方
不再受支持。在普通代码
参数中。被调用方
指的是封闭函数。这个用例很弱：只需命名封闭函数！此外，
arguments.callee
严重阻碍了像内联函数这样的优化，因为如果访问arguments.callee，则必须能够提供对未内联函数的引用。@Gabrieluethje，将其更改为命名函数是否可以详细记录您在其中所做的操作？此解决方案在使用诸如Ember之类的SinglePageApplication时非常有用。