动态加载Javascript文件并加载完成事件 [英] Dynamically loading Javascript files and load completion events

问题描述

今天我一直在加载动态JavaScript代码（文件）。我使用的解决方案是：

today I've been working on loading dynamic javascript code (files). The solution I use is :

function loadScript(scriptUrl) {
        var head = document.getElementsByTagName("head")[0];
        var script = document.createElement('script');
        script.id = 'uploadScript';
        script.type = 'text/javascript';
        script.src = scriptUrl;
        head.appendChild(script);
    }

这个问题是我不知道如何确定WHEN脚本内容被执行。由于脚本包含类（好的JS类），我写下了一个通过setTimeout调用的函数，并检查这些对象是否被定义。这不是灵活的，因为它不是自动的。所以？有没有办法加载这些脚本，并在被执行时提供可靠的通知？

the problem with this is that I don't know how to make sure WHEN the script contents are executed. Since the script contains classes (well JS classes), I wrote down a function that is called through setTimeout and checks if those objects are defined. This is not flexible as it is not automatical. So? Are there ways to load those scripts and have a reliable notification on when they have been executed?

推荐答案

最简单的方法JS库是制作一个XMLHttpRequest和eval（）的返回值。您的onload将是数据返回时，oninit将在您进行评估之后。

The easiest way short of a JS library is to make an XMLHttpRequest and eval() the return. Your "onload" would be when the data is returned, and "oninit" would be right after you've eval'd.

编辑：如果要排序，您可以创建一个AssetLoader，它可以使用脚本数组，并且不会eval（）一个脚本，直到它被提取和初始化为止。

If you want to sequence this, you can create an AssetLoader that takes an array of scripts and won't eval() a script until the one preceding it has been fetched and initialized.

编辑2：您还可以在注释中引用的帖子中使用script.onload的东西。 eval方法有一个优点，您可以分离并控制脚本导入的加载和执行部分。

EDIT 2: You can also use the script.onload stuff in the post referenced in the comments. The eval method has a slight advantage in that you can separate and control the load and execution portions of the script import.

编辑3：这是一个例子。考虑一个名为foo.js的文件，其中包含以下内容：

EDIT 3: Here's an example. Consider a file called foo.js that contains the following:

function foo () {
    alert('bar');
}

然后从浏览器中的其他页面执行以下操作： / p>

Then execute the following from another page in your browser:

function initScript (scriptString) {
    window.eval(scriptString);
}

function getScript (url, loadCallback, initCallback, callbackScope) {

    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onreadystatechange = function (e) {

        if (req.readyState == 4) {
            if (loadCallback) loadCallback.apply(callbackScope);
            initScript.call(null, req.responseText);
            if (initCallback) initCallback.apply(callbackScope);
        }

    }

    req.send();

}

function fooScriptLoaded () {
    alert('script loaded');
}

function fooScriptInitialized () {
    alert('script initialized');
    foo();
}

window.onload = function () {
    getScript('foo.js', fooScriptLoaded, fooScriptInitialized, null);
}

您将看到警报脚本加载，脚本初始化和栏。显然，这里的XMLHttpRequest的实现并不完整，并且您可以为要执行脚本的任何范围执行各种各样的操作，但这是它的核心。

You will see the alerts "script loaded", "script initialized", and "bar". Obviously the implementation of XMLHttpRequest here isn't complete and there are all sorts of things you can do for whatever scope you want to execute the script in, but this is the core of it.

这篇关于动态加载Javascript文件并加载完成事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！