Question

我有senerio，我需要使用动态JavaScript来呈现我的HTML页面。

我正在使用loadScript函数来加载外部JavaScript并传递回调函数。在我的HTML页面中，我正在为我的标题加载此脚本。加载脚本后我的标题部分工作正常，而我的头部部分我可以看到我的新脚本。

但是，当我尝试使用此脚本中的变量时，未定义。

function loadScript(url,callback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.id="acvDataRequest";
    document.getElementsByTagName("head")[0].appendChild(script);
    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            alert(dataHeader) // I CAN SEE MY OBJECT FROM LOADED SCRIPT
            callback();
        };
    }
    script.src = url;
    alert(dataHeader);         // IT SAYS UNDEFINED
}

使用以下方法调用脚本：

var actionName ="JSONdata/json.js";
loadScript(actionName,mergeTemplateJSONScript);

请建议，即使我的脚本在那里，为什么我也看不到我的变量。在script.onload中，我能够看到我的变量，但不能看到

Answer 1

你指定的内容：

script.src = url;

只是开始加载动态脚本。当您在下一行调用第二个alert()时，您的脚本尚未加载（此时它将在后台加载）。您只能从onload处理程序或从onload处理程序调用的某个函数中可靠地访问新加载的脚本中的变量。

请记住，脚本的动态加载是异步的。这意味着它在后台发生，而其他脚本继续运行（因此在脚本完成之前运行第二个alert()）。然后，脚本完成加载一段时间后，当它完成时，onload处理程序被调用。

因此，当您动态加载脚本时，所有使用这些脚本的代码都需要在onload处理程序中，在onload处理程序调用的某个函数中，或者保证在一段时间之后不执行（例如在事件处理程序中）你肯定在脚本完成加载之前不会发生这种情况。）

为了进一步解释，我在代码中添加了一些注释：

function loadScript(url,callback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.id="acvDataRequest";
    document.getElementsByTagName("head")[0].appendChild(script);
    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            // ** your script is now loaded here **
            alert(dataHeader) // I CAN SEE MY OBJECT FROM LOADED SCRIPT
            callback();
        };
    }
    script.src = url;
    // ** your script is in the process of loading here and has likely not completed **
    alert(dataHeader);         // IT SAYS UNDEFINED
}

Answer 2

行script.src = url;触发加载脚本文件。如果您之后立即调用警报，则尚未加载外部脚本。只有在调用onreadystatechange或onload函数后，才能从json访问变量。

你应该做的就是这样使用它：

var actionName ="JSONdata/json.js";
loadScript(actionName,function(){
    alert(dataHeader);
});

JavaScript动态加载

2 个答案: