最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Include multiple javascript files in a JS file - Stack Overflow

programmeradmin0浏览0评论

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 = '.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.

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./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.

Share Improve this question asked Apr 19, 2017 at 3:36 LEELEE 3,60510 gold badges44 silver badges76 bronze badges 4
  • 3 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 Commented Apr 19, 2017 at 3:38
  • 1 Create a reusable function? – Felix Kling Commented Apr 19, 2017 at 3:39
  • Take a step back and learn what each line of the code shown is actually doing. – nnnnnn Commented Apr 19, 2017 at 3:40
  • Basically a duplicate of How do I include a JavaScript file in another JavaScript file? – Felix Kling Commented Apr 19, 2017 at 3:58
Add a ment  | 

3 Answers 3

Reset to default 6

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

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 =

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"}]);
发布评论

评论列表(0)

  1. 暂无评论