Question

我正在尝试动态加载JavaScript文件，并在加载后运行文件内的函数。在我的主HTML中，我基本上有：

function load_javascript(js_file)
{
    function load_js_callback(example)
    {
        console.log("function " + function_in_js_file + " is " + typeof(function_name));
        if (typeof(function_in_js_file) == "undefined")
        {
            window.setTimeout(load_js_callback(example), 500);
            return false;
        }
        function_in_js_file(example);
    }

    var jstag = document.createElement("script");
    document.head.appendChild(jstag);

    // Browsers:
    jstag.onload=load_js_callback("example");
    // Internet Explorer:
    jstag.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            load_js_callback("example");
        }
    }
    jstag.setAttribute('src',js_file);
}

load_javascript("/js/example.js");

从我在互联网上找到的内容（https://stackoverflow.com/a/3248500和https://stackoverflow.com/a/16231055）这应该有效，但jstag.onload在定义function_in_js_file之前运行，所以我需要window.setTimeout再次检查，直到定义了函数。

理想情况下，我想摆脱那个超时。有没有办法知道文件何时完成加载/解析/执行（我不确定哪个是正确的术语）并且定义了函数，理想情况下不更改动态文件？我也尝试将document.head.appendChild(jstag);放在jstag.setAttribute之后，但结果相同。

Answer 1

在脚本加载之前运行的原因是：

var jstag = document.createElement("script");
document.head.appendChild(jstag);

// Browsers:
jstag.onload=load_js_callback("example");

将load_js_callback的返回值分配给jstag.onload。 onload处理程序需要一个函数：

var jstag = document.createElement("script");
document.head.appendChild(jstag);

// Browsers:
jstag.onload=function() { load_js_callback("example"); };

正如其他评论所指出的，所有这些保证是浏览器已经下载了脚本。

Answer 2

尝试这个定义一个名为

的函数

function loadScript(sScriptSrc, oCallback) {
    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = sScriptSrc;
    // most browsers
    oScript.onload = oCallback;
    // IE 6 & 7
    oScript.onreadystatechange = function () {
        if (this.readyState == 'complete') {
            oCallback();
        }
    }
    oHead.appendChild(oScript);
}

然后通过回调

调用脚本文件并在其中运行

    loadScript("/js/example.js", function () {
                //call function
function_in_js_file(example);
            });

Answer 3

考虑使用DOMContentLoaded js事件

is_sorted_many

一旦动态添加的脚本被解析/加载/执行，如何知道？

3 个答案: