55/97

Load a javascript file dynamically

Load a JavaScript file

// Create new script element
const script = document.createElement('script');
script.src = '/path/to/js/file.js';

// Append to the `head` element
document.head.appendChild(script);

Execute code when the JavaScript file is loaded

// Create new script element
...
script.addEventListener('load', function() {
    // The script is loaded completely
    // Do something
});

// Append to the `head` element
...

Load multiple JavaScript files in order

Assume that you want to load an array of JavaScript files, arrayOfJs, in order.

To do that, we have to load the first script, and load the second script when the first one is loaded completely. And continue doing so until all scripts are loaded.

// Load a script from given `url`
const loadScript = function(url) {
    return new Promise(function(resolve, reject) {
        const script = document.createElement('script');
        script.src = url;

        script.addEventListener('load', function() {
            // The script is loaded completely
            resolve(true);
        });

        document.head.appendChild(script);
    });
};

// Perform all promises in the order
const waterfall = function(promises) {
    return promises.reduce(
        function(p, c) {
            // Waiting for `p` completed
            return p.then(function() {
                // and then `c`
                return c().then(function(result) {
                    return true;
                });
            });
        },
        // The initial value passed to the reduce method
        Promise.resolve([])
    );
};

// Load an array of scripts in order
const loadScriptsInOrder = function(arrayOfJs) {
    const promises = arrayOfJs.map(function(url) {
        return loadScript(url);
    });
    return waterfall(promises);
};

The loadScriptsInOrder function returns a Promise indicates whether all scripts are loaded successfully:

loadScriptsInOrder([
    '/path/to/file.js',
    '/path/to/another-file.js',
    '/yet/another/file.js',
]).then(function() {
    // All scripts are loaded completely
    // Do something
})

Might be useful