Calling multiple JS files and functions

Question

I'm trying to do the following: - from an HTML page I want to call a .js file in the header. I want this file to contain 2 functions, A and B, that I want to call at different times as the page loads. This first part I have ready, my problem is: -Function B is supposed to call another .js file, wait for it to complete loading and run some code specific to function B.

This is what I have so far:

<head><script type="text/javascript" src="first.js"></script></head>

I have this to call the different functions that are inside first.js

<script language="JavaScript" type="text/javascript">
functionA ();
</script>

Now inside first.js:

function functionA () 
{
alert("A runs!");
}

function functionB ()
{
alert("B runs!");
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "http://www.URL.com" ;

--some additional code--

}

Suggestions? Thanks!

Do you control the content of the 2nd .js file you are loading? — James Lawruk, Jul 30 '14 at 16:48

score 4 · Answer 1 · edited May 23 '17 at 10:33

First off, you don't "call a javascript file". You load the javascript file which causes it to get parsed and any top level code is executed. Once loaded, you can then call any functions in it.

So, to load a javascript file from functionB and then call a function in it, you can finish the dynamically loaded code you started with, but then you need to add a notification for when it is loaded:

function functionB () {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "http://www.URL.com" ;
    script.onload = function() {
        // call the function in the newly loaded scrip here
    };
    document.getElementsByTagName("head")[0].appendChild(script);

}

Here's a post with a loadScript function that takes a callback when the script is loaded.

Here's a post with a bit more capable function that can actually load scripts sequentially and also contains support code for older versions of IE (if that is required).

Not sure if onload() will guarantee the external script has been executed. — James Lawruk, Jul 30 '14 at 17:00
Cool, I was concerned that when loading a script like this, it might be possible for the script to be loaded by the browser, but not yet executed. Thanks. — James Lawruk, Jul 30 '14 at 17:15

Ronny · Answer 2 · 2014-07-30T17:15:24.713

0

Making sure an external js file has been loaded across browsers requires more than a simple onload event; If you want a well-tested solution with added features, your best bet is using a library such as require.js.

Your code, after you include the require.js file somewhere, will look something like:

function functionA () {
  alert("A runs!");
}

function functionB () {
  alert("B runs!");

 require(['yourotherfile'], function(myfile) { // no js extension, read more in require's docs
     // --some additional code--
 });
}

edited Jul 30 '14 at 17:15

answered Jul 30 '14 at 16:45

Ronny

4,295
2
24
30

It's not exactly difficult to support browsers all the way back to IE6. 15 lines of code [here](http://stackoverflow.com/questions/11160948/how-to-know-if-jquery-has-finished-loading/11161045#11161045). If you want richer loading features (e.g. dependencies, etc...), then maybe that's a good reason to go get a new library just for loading. – jfriend00 Jul 30 '14 at 16:57
You're right, it isn't mandatory, though still a great solution. Edited, thanks. – Ronny Jul 30 '14 at 17:16

Calling multiple JS files and functions

2 Answers2