Here is an alternative approach using event listeners and modern ES2015 syntax:

function loadExternalScript(src) {
    return new Promise((resolve, reject) => {
        const scriptElement = document.createElement('script');
        scriptElement.src = src;
        scriptElement.addEventListener('load', resolve);
        scriptElement.addEventListener('error', e => reject(e.error));
        document.head.appendChild(scriptElement);
    });
}

loadExternalScript('https://example.com/script.js')
    .then(() => {
        console.log('Script has been successfully loaded!');
    }).catch(error => {
        console.error(error);
    });

Here is a method to dynamically load and execute a series of scripts sequentially. It is necessary to add each script tag to the DOM while explicitly setting its async attribute to false:

script.async = false;

By default, injected scripts in the DOM are executed asynchronously, so manually setting the async attribute to false is essential to ensure synchronous execution.

Illustrative Example

<script>
(function() {
  var scriptNames = [
    "https://code.jquery.com/jquery.min.js",
    "example.js"
  ];
  for (var i = 0; i < scriptNames.length; i++) {
    var script = document.createElement('script');
    script.src = scriptNames[i];
    script.async = false; // Ensures synchronous execution
    document.head.appendChild(script);
  }
  // jquery.min.js and example.js will be executed in order and synchronously
})();
</script>

<!-- Note: these two script tags could still be executed before `jquery.min.js`
     and `example.js` -->
<script src="example2.js"></script>
<script>/* ... */<script>

References

• Check out an informative article by Jake Archibald from Google titled Deep dive into the murky waters of script loading.
• The WHATWG documentation on the tag provides a comprehensive explanation of how script tags are loaded.

Exploring Dynamic import()

With the help of dynamic import functionality, you can effortlessly load modules and wait for them to execute, like so:

import("http://example.com/module.js").then(function(module) {
  alert("module ready");
});

If the module has already been loaded and executed, it won't be reloaded and executed again. Nevertheless, the promise returned by import will still be resolved.

It's important to note that the file is loaded as a module, not simply as a script. Modules are run in strict mode, and they are loaded in module scope, which prevents variables from automatically becoming global as they would in traditionally loaded scripts. To share a variable with other modules or scripts, use the export keyword in a module.

Additional Resources:

• Browser support for dynamic import
• ES modules: A cartoon deep-dive
• Dynamic import()

Here's a simple solution for you:

(function() {
    // Creating a new script element
    var newScript = document.createElement("script");
    newScript.type = "text/javascript";
    newScript.onload = function() {
        // Removing onload handler
        newScript.onload = null;

        // Perform actions with the loaded script!

    }

    // Appending the script to the document
    (document.getElementsByTagName("head")[0]).appendChild(newScript);

    // Assign the source URL to start loading
    newScript.src = "https://example.com/";
})();

Hope this provides some assistance. Cheers!

Developing a Loading Function

To efficiently load scripts, it is advisable to organize the process within a loading function.

It is crucial to be aware that dynamically loaded scripts generally run after statically loaded scripts (such as

<script src="My_script.js"></script>

For example, consider the following loader.js script:

function loadScript(url){
   let script = document.createElement("script");
   script.src = url;
   script.async = false; //CRITICAL
   /*Node Insertion Point*/.appendChild(script);
}
loadScript("my_script1.js");
loadScript("my_script2.js");

The execution of my_script1.js will occur before my_script2.js, which is beneficial when there are dependencies between the two scripts.

It is emphasized to set script.async = false because dynamically loaded scripts default to async = true, which does not ensure the order of loading.

Here is an updated version of the code that includes a new expression to evaluate:

static async importScript(src, expressionToEvaluateAndReturn){

        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.async = true;
            script.src = src;
            script.addEventListener('load', (event)=>{
                if(expressionToEvaluateAndReturn){
                    try{
                        let result = eval(expressionToEvaluateAndReturn);
                        resolve(result);
                    } catch(error){
                        reject(error);
                    }
                    
                } else {
                    resolve();
                }
            });
            script.addEventListener('error', () => reject('Error loading script "' + src + '"'));
            script.addEventListener('abort', () => reject('Script loading aborted for "' + src + '"'));
            document.head.appendChild(script);
        });    
        
    }   

Here is an example of how to use this updated function:

let d3 = await importScript('/bower_components/d3/d3.min.js','d3')
                    .catch(error => {
                        console.log(error);
                        throw error;
                    });