load javascript files from folder

Question

I am not sure what is the best approach to load all .js files from a folder from within index.html

The number of .js files will change so I cannot define them in the index.html the usual way. I cannot use php or jQuery solutions which would make it easier.

<script>
 var count = 1;
 function LoadNext()
 {
 var newScript = document.createElement("script");
 newScript.setAttribute("type", "text/javascript");
 newScript.setAttribute("src", "page-" + count++ + ".js"); //Increment the counter so we get the next page each time
 newScript.onload = LoadNext; //When the script loads call this function again
 document.getElementsByTagName("head")[0].appendChild(newScript)
 }
 LoadNext();
</script>

• Joe Enos: If you don't have a server language to work with, you won't be able to accomplish this.
• Keith Power: you think client side won't work. i.e using javascript?
• Cheruvian: You can load JS with clientside JS, but there's no way of knowing the file names. Do you have a standard naming convention at least?
• Keith Power: I would rather load *.js The files will be book.js, page-1.js, page-2.js, page-3.js etc

Answer 1

You can load a new JS file by creating a new <script> tag.

var filename = "JSDir/JSFile.js";
var newScript = document.createElement("script"); ///Create a new <script> element
newScript.setAttribute("type", "text/javascript"); // Set type to JS
newScript.setAttribute("src", filename); //Set src, your file to load
document.getElementsByTagName("head")[0].appendChild(newScript) //Append this script tag to the end of your head element

If you know your JS files are going to be named basename-1.js you can set a callback so that onload you increment to the next fielname basename-2.js 3, 4... and when the final one fails to load it will stop trying to load further.

var count = 1;
function LoadNext()
{
var newScript = document.createElement("script");
newScript.setAttribute("type", "text/javascript");
newScript.setAttribute("src", "basename-" + count++ + ".js"); //Increment the counter so we get the next page each time
newScript.onload = LoadNext; //When the script loads call this function again
document.getElementsByTagName("head")[0].appendChild(newScript)
}
LoadNext(); //Load basename-1.js

^^Not tested, but if that way of checking the file exists fails. You can always use AJAX and check for 404

• Keith Power: thanks for the reply, but sorry I am not quite sure how this works
• Cheruvian: replace basename with page and you should be able to load your page JS files.
• Keith Power: yes that loads the files perfectly. One last question, in the console I get an [Error] Failed to load resource: The requested URL was not found on this server. (page-11.js, line 0). Is there a way to fail silently?
• Cheruvian: It should fail silently by default but still log it to console. You could try handling it with .onerror