动态加载javascript文件时出错

我正在尝试在我的网页中延迟（动态）加载javascript文件

我用过这个：

这3个脚本将按顺序加载

myscript3依赖于myscript2
myscript2依赖于myscript1

试图以这种方式加载它的行为非常古怪

看起来这些未按预定顺序加载，因此 有时会抛出未定义的错误，有时不会抛出错误

我做错什么了吗。

---

更新：

我正在使用此代码以正确的顺序加载文件

 function loadjscssfile(filename, filetype) {
        if (filetype == "js") { //if filename is a external JavaScript file
            var fileref = document.createElement('script')
            fileref.setAttribute("type", "text/javascript")
            fileref.setAttribute("src", filename)
        }
        else if (filetype == "css") { //if filename is an external CSS file
            var fileref = document.createElement("link")
            fileref.setAttribute("rel", "stylesheet")
            fileref.setAttribute("type", "text/css")
            fileref.setAttribute("href", filename)
        }
        return fileref;
    }

    function loadSync(files, types) {
        if (typeof (files[0]) === 'undefined') return false;
        var script = loadjscssfile(files[0], types[0]);
        script.onload = function () {
            files.shift();
            types.shift();
            loadSync(files, types);
        }
        if (typeof script != "undefined")
            document.getElementsByTagName("head")[0].appendChild(script)
    }

    loadSync(['scripts/module3.base.js', 'scripts/module3.core.js', 'scripts/module3.init.js'], ['js', 'js', 'js']);
    console.log('this should get printed when all the three files are loaded');

但控制台输出是：

this should get printed when all the three files are loaded
scripts/module3.base.js:9 base is initialised
scripts/module3.core.js:6 core is initialised
scripts/module3.init.js:3 app is initialsed

看起来对loadSync的第一个调用本身就是一个异步调用

对于HTML5，只需使用异步属性（info at）

用于加载带有可选回调选项的脚本的函数示例

function loadScript(url, callback) {
    if (!callback) callback = function () {};
    var script = document.createElement("script")
    script.type = "text/javascript";
    script.setAttribute("async", "true");

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

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

对于混合溶液： 加载文件列表

---

您可以同步加载它们

function get_contents(file){
   var xhr = new XMLHttpRequest();
   xhr.open('get', file, false);
   xhr.send();
   return xhr.responseText;
 }

function loadjscssfile(filename, filetype){
var content = get_contents(filename);
if (filetype=="js"){ //if filename is a external JavaScript file
    var fileref=document.createElement('script');
    fileref.setAttribute("type","text/javascript");
    fileref.innerHTML = content;
}
else if (filetype=="css"){ //if filename is an external CSS file
    var fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.innerHTML = content;
}
if (typeof fileref!="undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

要从外部加载，请执行以下操作：

有两种方法：

回调作为另一个答案

或者您可以这样做：

function loadjscssfile(filename, filetype){
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    return fileref;
}

function loadSync(files,types){
    if(files[0] === 'undefined')return false; //if there's no files to load
    var script = loadjscssfile(files[0],types[0]); //load first file
    script.onload = function(){//after the script is loaded delete them and continue;
        files.shift();
        types.shift();
        loadSync(files,types);
    }
    if (typeof script !="undefined")
        document.getElementsByTagName("head")[0].appendChild(script)
}

loadSync(["myscript1.js","myscript2.js","myscript3.js"],['js','js','js']);

---

有开源js可以缓解您的问题。 您可以使用或插件

像

LABJS

，

RequireJS

这样的脚本加载程序将提高代码的速度和质量

在LABJS中，可以像这样保留加载脚本的顺序

$LAB.setOptions({AlwaysPreserveOrder:true})
.script("script1.js")
.script("script2.js")

或

$LAB
.script("script1.js").wait()
.script("script2.js")

script2.js将等待直到加载script1.js

---

我想这会解决你的问题。

我可以按正确的顺序加载这样的文件。但是现在我在chrome开发者工具的源代码部分看不到它们（当然是cz，现在我们添加了标记），这是因为现在您正在将文件的源代码添加到内联脚本标记中，所以脚本不是外部的，因为它没有

src

。我不希望这样。我仍然希望能够在参考资料部分看到它们。因此，它们保留在单独的文件中（它们应该是这样的），我可以按正确的顺序加载文件，但在chrome developer tools的resources选项卡中查看它们时遇到问题。如果我试图加载的javascript文件只包含一个具有某些值的对象（即没有函数语句），并且如果1）chrome developer工具处于打开状态，或者2）我加载的js文件包含任何函数（）{}，那么我可以在资源选项卡中查看该文件。还有一个问题。loadSync调用本身就是一个异步调用。请查看我更新的问题我不能使用回调模型，因为这需要我更改现有的代码库（javascript小部件、模块等）以适应回调地狱模型。我不打算异步加载它们。我们的想法是加载它们，就像它们是按照html页面中所需的顺序编写的一样，以头写的方式从加载的文件中执行脚本：loadjscssfile（“myscript.js”、“js”）；myscript.js的内容（函数（窗口）{//code here}）；好的，目的是按照特定的顺序（例如同步）加载（比如）10个javascript文件，这样依赖链就不会断开（不使用回调地狱）。让我们注意一下，对于LABjs来说，“等待”是指执行，而不是加载。为了获得最佳性能，所有脚本都尽可能并行加载，但如果需要，它们的执行顺序是正确的。

function loadjscssfile(filename, filetype){
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    return fileref;
}

function loadSync(files,types){
    if(files[0] === 'undefined')return false; //if there's no files to load
    var script = loadjscssfile(files[0],types[0]); //load first file
    script.onload = function(){//after the script is loaded delete them and continue;
        files.shift();
        types.shift();
        loadSync(files,types);
    }
    if (typeof script !="undefined")
        document.getElementsByTagName("head")[0].appendChild(script)
}

loadSync(["myscript1.js","myscript2.js","myscript3.js"],['js','js','js']);

$LAB.setOptions({AlwaysPreserveOrder:true})
.script("script1.js")
.script("script2.js")

$LAB
.script("script1.js").wait()
.script("script2.js")