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:

    function loadjscssfile(filename, filetype)
{
    //if filename is a external JavaScript file
    if (filetype=="js")
    {
        var fileref=document.createElement('script');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", filename);
    }
    //if filename is an external CSS file
    else if (filetype=="css")
    {
        var fileref=document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    }
    if (typeof fileref!="undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

I think, the code is not correct, because, in the master JavaScript code, I can no read variables defined in the imported code, such as:

var fileRef = loadjscssfile('Language/svk.js', 'js');
alert("Pet Name: " + PETNAME);

imported svk.js file contains the only code:

// JavaScript Document
var PETNAME = "Beauty";

Thank you.

Answer 1

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.

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