web - Dynamically Importing JavaScript - Stack Overflow

admin管理员组

文章数量:1410737

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.

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.

• javascript
• web
• dynamic-html

Share Improve this question Follow edited Mar 9, 2020 at 8:46 Malkhazi Dartsmelidze 4,99244 gold badges2020 silver badges4343 bronze badges asked Jun 2, 2012 at 18:04 Bunkai.SatoriBunkai.Satori 4,7581313 gold badges5252 silver badges7878 bronze badges 6

• Check whether importing js file is suceeds or not. Den try to access the variables defined in loaded js. – Shreedhar Commented Jun 2, 2012 at 18:11
• @Sarfraz: Hi, yes, tye code gets imported, I can confirm it so, that I put the alert("Pet Name: " + PETNAME); into the imported code, and there it gets run, and I see the alert box with appropriate value. However, if the alert("Pet Name: " + PETNAME); is moved to the master file, I can not get the value of PETNAME – Bunkai.Satori Commented Jun 2, 2012 at 18:11
• You have to remember that it takes some time for the file to load and be parsed, you can't access its content right after you call you function. Perhaps in your imported file you can add a function call to a callback in the original code in order to signal that the imported file was successfully loaded. – Yaniro Commented Jun 2, 2012 at 18:12
• 1 take a look at this: stackoverflow./questions/950087/… there is a good answer and a good jQuery example of using variables after the script has been read/loaded – Dappergoat Commented Jun 2, 2012 at 18:14
• @Yaniro: Hi, thank you for your response. How do I know, that the code has been imported? Should that simply be the last line in my imported code? Would you have an example for me, please? Thank you for this good tip, I have some ideas to further explore. – Bunkai.Satori Commented Jun 2, 2012 at 18:15

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

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.

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

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

本文标签： webDynamically Importing JavaScriptStack Overflow