1

I'm aware, one can "import" script files from within javascript like this:

var imported = document.createElement('script');
imported.src = '/path/to/imported/script.js';
document.head.appendChild(imported);

For that the filename (here: script.js) and its location must be known in advance.

I have a number of optional modules than can be present or not in my main project. Each module is it's own javascript file. I want to detect which one is present in the scripts/ directory and run them in the above fashion, i.e. I don't know the filenames in advance. I know javascript is client-side and has no access to the server-side directory, but maybe there is a workaround with request objects or something like that. I do not have a server-side scripting language available. Is that at all possible?

To illustrate, I have a file /scripts/main.js that is always present and included from an HTML file index.html. Then there is a number of other *.js files in /scripts/, the modules. I want them to be automatically included by main.js. To Illustrate:

<!-- In index.html -->
<html><head>
<title>Include Scripts</title>
<script type="text/javascript" src="scripts/main.js">
</head><body>
  <!-- ...more stuff... -->
</body></html>

While main.js might look somthing like this:

// In main.js
scripts = findScripts( 'scripts/*.js' ); // How do I do this?
for( i=0; i<scripts.length; i++ ) {
    if( scripts[i].match(/main.js$/ ) continue;
    var imported = document.createElement('script');
    imported.src = scripts[i];
    document.head.appendChild(imported);
}

And then the modules in the script directory should be run on their own.

con-f-use
  • 3,772
  • 5
  • 39
  • 60
  • 3
    You can't, not directly. JS has no filesystem, therefore there's no "get list of filenames" or "apply glob pattern to filename list". If you made your script directory browseable, so that your webserver returns a list of filenames, you can then parse that html for the filenames/urls. Or you just write a webservice that is DESIGNED to tell your code what's available, and then it's a simple ajax request to get that list. – Marc B Sep 02 '16 at 21:49
  • Hmm... I didn't think of parsing a browsable folder. Will check, if `.htaccess` files are enabled for me, and I can make the `scripts` dir browsable. Any idea, what to do if not? – con-f-use Sep 02 '16 at 21:53

2 Answers2

4

There won't be a purely front-end solution for this, as the HTML page can't look at the server and see which files are there. You have a few options:

  1. If you know all of the possible JS files that could be there, you could just try to include them all and some will succeed and some will fail (404). I wouldn't really suggest this as a viable option but technically...it could work.
  2. Create a small web service/API endpoint that looks at the list of JS files in that folder and returns them to your page, and now you have a list you can load.
  3. (what I would look into) Use a build system of some sort, or at least concatenation. If you have a system that just takes all of the JS files in the folder and combines them all into modules.js then you only need to load modules.js for every page.
mherzig
  • 1,528
  • 14
  • 26
1

no you can't. javascript runs in the browser and doesn't have access to list the files on the server. you can search for ways using php or any backend language

a similar discussion is found here: Is there a way to return a list of all the image file names from a folder using only Javascript?

Community
  • 1
  • 1
Jeanclaude
  • 58
  • 6