如何知道动态添加的脚本是parsed/loaded/executed？

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");

根据我在互联网上找到的内容 ( and ) 这应该可以，但是 function_in_js_file 之前的 jstag.onload 运行被定义了，所以我需要window.setTimeout 再次检查，直到函数被定义。

理想情况下，我想摆脱那个超时。有什么方法可以知道文件何时完成 loaded/parsed/executed （我不确定哪个是正确的术语）并且函数已定义，理想情况下无需更改动态文件？我也尝试将 document.head.appendChild(jstag); 放在 jstag.setAttribute 之后，但结果相同。

Answer 1

尝试定义一个名为

的函数

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 2

考虑使用 DOMContentLoaded js 事件

document.addEventListener('DOMContentLoader', function () {
    load_javascript("/js/example.js"); // Or what else you want to do
    // HERE I'm confident that my webpage is loaded and my js files too.
})

Answer 3

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

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

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

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

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

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

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

如何知道动态添加的脚本是parsed/loaded/executed？

How to know once a dynamically added script is parsed/loaded/executed?

javascript

onload