How can I include all JavaScript files in a directory via JavaScript file?

Question

I have a bunch of JavaScript files that I would like to include in the page, but I don't want to have to keep writing

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

So is there a way to include all files in a directory (unknown size)? Can I do something like...

$.getScript("js/*.js");

... to get all the JavaScript files in the "js" directory? How can I do this using jQuery?

Solution 1

In general, this is probably not a great idea, since your html file should only be loading JS files that they actually make use of. Regardless, this would be trivial to do with any server-side scripting language. Just insert the script tags before serving the pages to the client.

If you want to do it without using server-side scripting, you could drop your JS files into a directory that allows listing the directory contents, and then use XMLHttpRequest to read the contents of the directory, and parse out the file names and load them.

Option #3 is to have a "loader" JS file that uses getScript() to load all of the other files. Put that in a script tag in all of your html files, and then you just need to update the loader file whenever you upload a new script.

Solution 2

What about using a server-side script to generate the script tag lines? Crudely, something like this (PHP) -

$handle = opendir("scripts/");

while (($file = readdir($handle))!== false) {
    echo '<script type="text/javascript" src="' . $file . '"></script>';
}

closedir($handle);

Solution 3

Given that you want a 100% client side solution, in theory you could probably do this:

Via XmlHttpRequest, get the directory listing page for that directory (most web servers return a listing of files if there is no index.html file in the directory).

Parse that file with javascript, pulling out all the .js files. This will of course be sensitive to the format of the directory listing on your web server / web host.

Add the script tags dynamically, with something like this:

function loadScript (dir, file) {
 var scr = document.createElement("script");
 scr.src = dir + file;
 document.body.appendChild(scr);
 }

Solution 4

You can't do that in JavaScript, since JS is executed in the browser, not in the server, so it didn't know anything about directories or other server resources.

The best option is using a server side script like the one posted by jellyfishtree.

Solution 5

It can be done fully client side, but all javascript file names must be specified. For example, as array items:

function loadScripts(){
   var directory = 'script/';
   var extension = '.js';
   var files = ['model', 'view', 'controller'];  
   for (var file of files){ 
       var path = directory + file + extension; 
       var script = document.createElement("script");
       script.src = path;
       document.body.appendChild(script);
   } 
 }

View more solutions

Comments

[Hristo]

eh... I would like to use this as a last resort. I prefer to not use PHP at the moment.

[harpo]

Umm, getScript requires the path to the script, right? There's no magic.

[harpo]

I think this is the only way to do what the OP wants without server-side scripting. But I agree, it's better avoided.

[Hristo]

I like Option #3 and I agree that it isn't a good option. However, I would like to get it to work first :) So how would I use .getScript() to get all the files in the directory? Can you provide some code?

[Alberto Martinez]

You can't access private server resources from JS unless used along with some server side script, period. They are executed in different places (one at the client and the other at the server).

[csakii]

Hristo, I just meant that you could have one getScrip() call for each JavaScript file in the directory, then add a new entry each time a new file is added to the directory.

[jellyfishtree]

I just don't think this is possible in Javascript because it has no access to any filesystem. Maybe an ActiveX Object, but users probably aren't gonna like this.

[csakii]

jellyfishtree, I don't think you're understanding what I'm saying - if the OP puts all of the JS files in a "scripts" directory, for example, then the javascript on their HTML page can just do an XmlHttpRequest for "example.com/scripts", which would return a directory listing on the server. Then they can just parse the text of the response, and load each individual file.

[Adam Grant]

It would be cool to do this, even if just for fun. It would allow the developer to drag and drop js files into a js folder and deploy their functions like an application. No code-writing needed. I can see some neato applications of this if it could be made to work.

[Loïc Faure-Lacroix]

@MarkBessey note that you can compile file dependencies instead of hosting many files. This will be faster than having to load multiple files.

[tejas_spy007]

this would've been the accepted answer if the question was asked today

[Hasan A Yousef]

liked your swift answer, and tuned it little bit below, I think you need to add the script to the head not the body, thanks

[Frozenfrank]

The one caveat to this is that it requires the server to publish a list of the files in its directory. There is a setting somewhere in your server settings that allows this, if it is disabled it is literally impossible to get what you want without server side code.

[Frozenfrank]

It is also dependent on jQuery to load the list of files (inside exploreFolder) and then load the files (inside loadFile).

[Anderson Green]

Alternatively, it's also possible to load the files from a zip folder using FileReader.