Include multiple javascript files in a JS file

Question

So, if I have to include a Javascript file in a .js file, I use to below script. It works fine.

var script = document.createElement("SCRIPT");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
script.type = 'text/javascript';
script.onload = function() {

  //Some code

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

What should I do If I need to include more than 1 files.

You'd do the same thing. But it's better just to include it in the HTML of the JS file your referencing for the original JS file. — Spencer Wieczorek, Apr 19 '17 at 03:38
Take a step back and learn what each line of the code shown is actually doing. — nnnnnn, Apr 19 '17 at 03:40
Basically a duplicate of [How do I include a JavaScript file in another JavaScript file?](http://stackoverflow.com/q/950087/218196) — Felix Kling, Apr 19 '17 at 03:58

Shakti Phartiyal · Accepted Answer · 2017-04-19T03:45:35.277

You can make a function and pass the js files you want to include like so:

        function scriptLoader(path, callback)
        {
            var script = document.createElement('script');
            script.type = "text/javascript";
            script.async = true;
            script.src = path;
            script.onload = function(){
                if(typeof(callback) == "function")
                {
                    callback();
                }
            }
            try
            {
                var scriptOne = document.getElementsByTagName('script')[0];
                scriptOne.parentNode.insertBefore(script, scriptOne);
            }
            catch(e)
            {
                document.getElementsByTagName("head")[0].appendChild(script);
            }
        }

And call it like so:

scriptLoader('/path/to/file.js');

in the similar manner you can call as many JS file you like this:

scriptLoader('/path/to/file2.js');
scriptLoader('/path/to/file3.js');

and even with onload callback functions like so:

scriptLoader('/path/to/file6.js',function(){
    alert('file6 loaded');
});

Great. This is a better implementation of what I could do. Thanks. — LEE, Apr 19 '17 at 03:45

score 0 · Answer 2 · answered Apr 19 '17 at 03:42

0

I would imagine you'd do the same as you've got there but just change the variable name from var script to something like var scriptA and change the code that follows to match like script.src = to scriptA.src =

answered Apr 19 '17 at 03:42

Mas0490

86
9

Yes. That makes sense. Thanks. – LEE Apr 19 '17 at 03:44
You could reuse the same variable for multiple scripts. – nnnnnn Apr 19 '17 at 06:21

score 0 · Answer 3 · answered Apr 19 '17 at 03:49

This function will load one script or many, pass a single file or an array of many:

function include(src, cb) {
  arr = (src instanceof Array) ? src : [{
    'src': src,
    'cb': cb
  }];
  arr.forEach(function(item) {
    _include(item.src, item.cb);
  })

  function _include(src, cb) {
    var script = document.createElement("SCRIPT");
    script.src = src;
    script.async = true;
    script.type = 'text/javascript';
    script.onload = function() {
      if (cb) cb()
    }
    document.getElementsByTagName("head")[0].appendChild(script);
  }
}

include("/js/file1.js");
include("/js/file1.js", function(){console.log("file1 loaded")});
include([{src:"/js/file1.js"},{src:"/js/file2.js"},{src:"/js/file3.js"}]);

Include multiple javascript files in a JS file

3 Answers3