Javascript to load another js file

Question

I am trying to load another JS file from a JS file.

From my JavaScript file run.js , I have the following:

document.write("<script type='text/javascript' src='my_script.js'></script>");
alert(nImages);

In side my_script.js I have the following:

<SCRIPT language="JavaScript" type="text/javascript">
<!--
nImages = 6;
//-->
</SCRIPT>

But I can't seem to get it to alert the nImages from my_script.js file.

Answer 1

You could do this:

var script = document.createElement('script');
script.src = 'my_script.js';
script.type = 'text/javascript';

script.onload = function () {
    alert(nImages);
};

document.getElementsByTagName('head')[0].appendChild(script);

Answer 2

You should not use HTML inside of your script file. Your script file my_script.js should have only this in it.

nImages = 6;

Additional note: you don't need language="JavaScript" or the <!-- or //--> . Those are old conventions not needed for modern browsers (even IE6). I'd also avoid using document.write() in your JS as it has performance implications. You may want to look at a library such as RequireJS which provides a better way to load other JS files in the page.

I also have a code snippet on Github inspired by Steve Souders that loads another file via straight JS.

var theOtherScript = 'http://example.com/js/script.js';

var el = document.createElement('script');
el.async = false;
el.src = theOtherScript;
el.type = 'text/javascript';

(document.getElementsByTagName('HEAD')[0]||document.body).appendChild(el);

This will append the other script to the element (if it exists) or the of the page.

Answer 3

Javascript files should not have HTML in them. They should consist entirely of Javascript code, so my_script.js should contain only:

nImages = 6;

This still won't work because when you write the new script tag into the document it doesn't run immediately. It is guaranteed that run.js finishes running before my_script.js starts, so nImages is undefined when you alert it and then becomes 6 later. You'll see that this works:

document.write("<script type='text/javascript' src='my_script.js'></script>");

function call_on_load(){
    alert(nImages);
}

If the contents of my_script.js are:

nImages = 6;
call_on_load();

Edit

Since you said in a comment that you can not edit my_script.js you can do this although it is not nearly as nice a solution:

// Force nImages to be undefined
var undefined;
window.nImages = undefined;

document.write("<script type='text/javascript' src='my_script.js'></script>");

(function is_loaded(cb){
    if(typeof window.nImages == 'undefined')
        setTimeout(function(){ is_loaded(cb); }, 100);
    else
        cb();
})(function(){
    // This is executed after the script has loaded
    alert(nImages);
});

This is not a nice solution, however, since it will continue polling indefinitely if there is an error loading the script.

EDIT

You posted in a comment the file you want to include, which has the <SCRIPT at the top. This file is useless and you can't do anything about it client side. You'd have to write a server side script to load the file as text in which case you can just parse it for the value you want.