页面刷新时脚本标记中的动态加载失败

时间:2014-11-20 16:17:50

标签: javascript

我正在开发AngularJS中的Web应用程序,因此我们有很多脚本标记。出于调试目的,我们希望所有这些都单独加载,但我们也使用纯HTML页面,因此我们没有ASP.net捆绑的奢侈等。

为了便于使用,我打算创建一个加载所有其他文件的JS文件,因此我们所有的开发人员只需要在页面上放置一个文件,他们就可以更新函数读取的主列表。

当我运行我的应用程序时,这在初始页面加载时效果很好,但是当我刷新页面时,一切都完全被破坏了。

我正在寻找一个解决此问题的方法,或者是一种更好的方法来加载我的脚本。

使用Javascript:

首先定义要加载的脚本:

var scripts = {
    libs: [
        "jquery/jquery-1.10.2.js",
        "angularjs/angular.js",
        "kendo/2014.2.716/kendo.all.min.js",
        "d3/d3.js"
    ],
    modules: [
        "hiModule.js"
    ],
    common: [
        "Classes.js"
    ],
    components: [
        "contentArea/contentAreaCtrl.js",

        "kendoGrid/kendoGridDir.js",
        "kendoGrid/kendoGridCtrl.js",
        "kendoGrid/kendoGridSvc.js",

        "login/loginDir.js",
        "login/loginCtrl.js",

        "search/searchCtrl.js",
        "search/searchDir.js",

        "sidebar/sidebarDir.js"
    ],
    services: [
        "sessionTrackerSvc.js"
    ]

};

然后构建脚本URL并将它们添加到fileQueue:

function buildScriptUrls() {
    var i;
    for (var key in scripts) {
        if (key) {
            var fileUrl;
            var arrayLength = scripts[key].length;
            for (i = 0; i < arrayLength; ++i) {
                if (key === "libs") {
                    fileUrl = "Scripts/libs/" + scripts[key][i];
                } else if (key !== "modules") {
                    fileUrl = "Scripts/SPEnterprisePortal/" + key + "/" + scripts[key][i];
                } else {
                    fileUrl = "Scripts/SPEnterprisePortal/" + scripts[key][i];
                }
                fileQueue.push(fileUrl);
            }
        }
    }
}

最后,创建脚本并将所有脚本附加到页面。

function appendChild() {
    if (counter > 0) {

        counter -= 1;
        var curFile = fileQueue[counter];
        var jsFile = document.createElement("script");
        jsFile.type = "text/javascript";
        jsFile.src = curFile;
        jsFile.onload = appendChild();
        jsFile.onreadystatechange = function () {
            if (this.readyState == "complete") {
                appendChild();
            }
        }
        document.body.appendChild(jsFile);
    }
}

实际执行发生在脚本底部的IIFE中:

var fileQueue = [];
buildScriptUrls();
var counter = fileQueue.length;
appendChild();

您会注意到该函数从脚本列表的末尾开始,然后向后运行。这是因为我的函数调用的嵌套特性。创建了所有脚本,但每个appendChild()函数调用自身,并且在加载之前不会将脚本附加到页面。因此,最后调用的脚本首先被添加到页面中,因此函数需要向后工作。

这是我自己的发明,所以我确定有更好的方法,但是现在我只想弄清楚为什么它在加载时工作正常,然后在页面刷新它就会中断! / p>

谢谢!

0 个答案:

没有答案