Dynamically Importing JavaScript

Question

What is the correct way to dynamically import JavaScript (.js) files into a parent JavaScript code, please?

I am using the following code, but it seems not correct:<

Answer 1

The reason you can't read the PETNAME variable is that dynamically injecting scripts like this is asynchronous and non-blocking. This means that your alert executes before the script has actually been loaded. Instead, you might have to poll for the existence of the PETNAME variable:

var waitForPETNAME = function(){
        if (typeof PETNAME === 'undefined') {
            setTimeout(waitForPETNAME, 15);
        } else {
            // execute code that uses PETNAME
        }
    };

waitForPETNAME();

Also, a more fool-proof way to inject elements dynamically is to insert them before the first script element since you know for sure that a script element has to exist (otherwise you wouldn't be executing code). In other words, replace:

document.getElementsByTagName("head")[0].appendChild(fileref)

with:

var insref = document.getElementsByTagName('script')[0];
insref.parentNode.insertBefore(fileref, insref);

Answer 2

In svk.js add the following (after the variable deceleration):

svkLoaded();

In the master code file add the following:

function svkLoaded()
{
    alert("Pet Name: " + PETNAME);
}

Answer 3

You can't use variables and functions defined in the external JS file immediatly after inserting the <script> tag. It takes the browser a few milliseconds to load the file and execute it.

You would have to work with some kind of callback in order to have the proper loading order for your JavaScript.

For proper conditional loading of JavaScript have a look at Require.js. There the Asynchronous Module Definition pattern is implemented.