Why importing JavaScript files programatically like this doesn't work?

Question

I have this function which is imported directly in the HTML

function include(filename){
    var head = document.getElementsByTagName('head')[0];

    script = document.createElement('script');
    script.src = filename;
    script.type = 'text/Javascript';

    head.appendChild(script);
}

And I want to use it to import my other JSs programatically like this

function testRunner(){
    include('Point.js');
    include('Grid.js'); 
    gridTest();
}

the JSs are showing in the HTML in the head and they look ok...

But the other JSs cannot see it.

Why ?

ThiefMaster · Accepted Answer · 2011-12-13 11:51:48Z

7

The included scripts are loaded asynchronously, so the include() function returns before the script file has been fully loaded.

You need to pass a callback for the onload event of the script:

function include(filename, cb){
    var head = document.getElementsByTagName('head')[0];

    script = document.createElement('script');
    script.src = filename;
    script.type = 'text/Javascript';
    script.onload = cb;

    head.appendChild(script);
}

And then load it like this:

function testRunner() {
    include('Point.js', function() {
        include('Grid.js', function() {
            gridTest();
        });
    });
}

Of course using an existing script for dynamic loading of JavaScript would be much more comfortable, you could then probably do something like this:

require(['Point.js', 'Grid.js'], function() {
    gridTest();
});

Have a look at RequireJS: http://requirejs.org/

edited Dec 13, 2011 at 11:51

answered Dec 13, 2011 at 11:37

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cristiano Fontes Over a year ago

Thanks great example and answer !

Nikoloz Shvelidze · Accepted Answer · 2011-12-13 11:37:37Z

1

That's because other JS-es are already loaded when you load your script. You need to use callback function.

answered Dec 13, 2011 at 11:37

Nikoloz Shvelidze

1,6141 gold badge15 silver badges28 bronze badges

1 Comment

Nikoloz Shvelidze Over a year ago

you can use Modernizr for that

Ahmet Can Güven · Accepted Answer · 2011-12-13 11:37:30Z

0

You must try this.

window.onload = function(){ 
var s = document.createElement('script'); 
s.src = 'YourScript.js'; 
document.getElementsByTagName('body')[0].appendChild(s); 
}

answered Dec 13, 2011 at 11:37

Ahmet Can Güven

5,4524 gold badges43 silver badges61 bronze badges

Comments

graphicdivine · Accepted Answer · 2011-12-13 11:39:44Z

-1

You need to be sure that the files have loaded before you try to use them. Try something like:

function include(filename){
    ...
    return true;
}

if (include("grid.js")){
    testgrid();
}

answered Dec 13, 2011 at 11:39

graphicdivine

11.3k7 gold badges35 silver badges60 bronze badges

1 Comment

ThiefMaster Over a year ago

And how exactly would he determine that synchronously? ;)

Kris · Accepted Answer · 2011-12-13 11:41:13Z

-1

To bring js files, i think you need to fetch it as objects to cache and use.

function preFetchResources(url) {
                var o = document.createElement('object');
                o.data = url;
                o.width = 0;
                o.height = 0;
                document.body.appendChild(o);
            }

This will prefetch a js file from its url and add in cache. You can access the library from there.

answered Dec 13, 2011 at 11:41

Kris

8,8984 gold badges45 silver badges71 bronze badges

Collectives™ on Stack Overflow

Why importing JavaScript files programatically like this doesn't work?

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related