4

请问将JavaScript（.js）文件动态导入父JavaScript代码的正确方法是什么？

我正在使用以下代码，但似乎不正确：

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

我认为，代码不正确，因为在主 JavaScript 代码中，我无法读取导入代码中定义的变量，例如：

var fileRef = loadjscssfile('Language/svk.js', 'js');
alert("Pet Name: " + PETNAME);

导入的 svk.js 文件包含唯一的代码：

// JavaScript Document
var PETNAME = "Beauty";

谢谢你。

4

3 回答 3

4

插入<script>标签后，不能立即使用外部 JS 文件中定义的变量和函数。浏览器需要几毫秒来加载文件并执行它。

您必须使用某种回调才能为您的 JavaScript 设置正确的加载顺序。

对于 JavaScript 的正确条件加载，请查看Require.js。那里实现了异步模块定义模式。

于 2012-06-02T18:11:04.367 回答
3

svk.js添加以下内容（在变量减速之后）：

svkLoaded();

在主代码文件中添加以下内容：

function svkLoaded()
{
    alert("Pet Name: " + PETNAME);
}
于 2012-06-02T18:19:19.923 回答
2

您无法读取PETNAME变量的原因是像这样动态注入脚本是异步且非阻塞的。这意味着您alert在脚本实际加载之前执行。相反，您可能必须轮询PETNAME变量是否存在：

var waitForPETNAME = function(){
        if (typeof PETNAME === 'undefined') {
            setTimeout(waitForPETNAME, 15);
        } else {
            // execute code that uses PETNAME
        }
    };

waitForPETNAME();

此外，动态注入元素的更简单的方法是将它们插入到第一个脚本元素之前，因为您确定必须存在脚本元素（否则您将不会执行代码）。换句话说，替换：

document.getElementsByTagName("head")[0].appendChild(fileref)

和：

var insref = document.getElementsByTagName('script')[0];
insref.parentNode.insertBefore(fileref, insref);
于 2012-06-02T18:12:01.417 回答