Question

请将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";

谢谢。

Answer 1

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

您必须使用某种回调才能获得适当的JavaScript加载顺序。

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

Answer 2

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

svkLoaded();

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

function svkLoaded()
{
    alert("Pet Name: " + PETNAME);
}

Answer 3

您无法读取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);

动态导入Javascript

3 个答案: