How to load the multiple js files in single javascript file, without using document.write?

Question

var head = document.getElementsByTagName("head")[0];
function loadjscssfile(filename, filetype) {
    if (filetype == "js") {
        var fileref = document.createElement('script');
        fileref.setAttribute("type", "text/javascript");
        fileref.setAttribute("src", filename);
        //fileref.async = false;
    }
    else if (filetype == "css") { //if filename is an external CSS file
        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
        //fileref.async = false;
    }
    if (typeof fileref != "undefined")
        console.log("check file", head.appendChild(fileref));
        fileref.sync = true;
    head.appendChild(fileref);
}

i am using above function, but i am getting few error, I think files are not loaded one by one. I want to load one by one js file.
How to load multiple scripts files one by one.

loadjscssfile ("js/scripts/jquery.js", "js");    
loadjscssfile ("js/scripts/angular.min.js", "js");   
loadjscssfile ("js/scripts/angular-ui-router.min.js", "js");   
loadjscssfile ("js/scripts/angular-resource.min.js", "js");    
loadjscssfile "js/scripts/angular-route.min.js", "js");       
loadjscssfile ("js/scripts/moment.min.js", "js");    
loadjscssfile("js/scripts/humanize-duration.js", "js");    
loadjscssfile("js/scripts/angular-timer.min.js", "js");     
loadjscssfile("js/scripts/angular-translate.min.js", "js");    
loadjscssfile("js/scripts/angular-translate-loader-url.min.js", "js");

Nothing wrong, but i want to implement my code without document.write(); — kumar
– kumar, Commented Jan 6, 2016 at 13:09

Sebastian · Accepted Answer · 2016-01-06 13:59:55Z

2

Take a look at RequireJS. You can load js files on demand.

Here is an example http://requirejs.org/docs/start.html

answered Jan 6, 2016 at 13:59

Sebastian

3442 silver badges8 bronze badges

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

Comments

Varkal · Accepted Answer · 2016-01-06 13:11:51Z

1

Maybe you can look a task runner like Grunt or Gulp to automatically inject JS files and/or CSS files into your HTML ?

For Grunt use the fileblocks plugin and for gulp, the inject plugin

answered Jan 6, 2016 at 13:11

Varkal

1,4082 gold badges17 silver badges33 bronze badges

1 Comment

kumar Over a year ago

Yes , is there any reference for this?

Alex Vasilev · Accepted Answer · 2016-01-06 14:56:05Z

1

Webpack can help you. It can make one .js file from many But be careful - use obfuscation for .min.js files can make you many problems, dont use it when you will make one(or two) big .js files

answered Jan 6, 2016 at 14:56

Alex Vasilev

493 bronze badges

Collectives™ on Stack Overflow

How to load the multiple js files in single javascript file, without using document.write?

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related