I was wondering if there is a javascript "include" function (similar to the one in python), and I was looking for something but couldn't find anything except $.load() and google.load().

So, I ventured out to create a script which could do that just for fun, so:

var include = function( lib ) {
// start with jQuery
    if(lib == "jquery") {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = ".min.js";
        script.defer = "defer"; // should I use script.setAttribute('defer', 'defer')?
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(script, s);
    }
}

And then, in a separate script:

include("jquery");
$("p").innerHTML = "Worked!";

But I got an error $ is not defined

Which makes sense, because the script is running before jQuery is loaded. So my question is, is there a way to make sure the include script runs before anything else ahead of it? I've seen callback solutions that look something like this:

include(".min.js", function() {
    $("p").innerHTML = "Worked!";
});

But I do wonder if there is anything (like I proposed above) that's a little more neat.

Any help would be much appreciated!

I was wondering if there is a javascript "include" function (similar to the one in python), and I was looking for something but couldn't find anything except $.load() and google.load().

So, I ventured out to create a script which could do that just for fun, so:

var include = function( lib ) {
// start with jQuery
    if(lib == "jquery") {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://code.jquery./jquery.min.js";
        script.defer = "defer"; // should I use script.setAttribute('defer', 'defer')?
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(script, s);
    }
}

And then, in a separate script:

include("jquery");
$("p").innerHTML = "Worked!";

But I got an error $ is not defined

Which makes sense, because the script is running before jQuery is loaded. So my question is, is there a way to make sure the include script runs before anything else ahead of it? I've seen callback solutions that look something like this:

include("http://code.jquery./jquery.min.js", function() {
    $("p").innerHTML = "Worked!";
});

But I do wonder if there is anything (like I proposed above) that's a little more neat.

Any help would be much appreciated!

• javascript
• jquery
• python
• include

Share Improve this question Follow asked Sep 18, 2013 at 22:45 Jace CottonJace Cotton 2,01411 gold badge2222 silver badges3838 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You're reinventing the wheel here: there's a vast number of the libraries/ponents doing basically the same job, but with more features. Check Asynchronous Module Definition API and RequireJS for a start.

Because of how JavaScript runs there is no way to do it much cleaner then that. You could have some sort of interval to load all files you need, so like this.

window.includeFiles = [];
function include(file){
   window.includeFiles.push(file);
}
function initialize(callback){
   for(var i = 0; i < window.includeFiles.length; i++){
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = window.includeFiles[i];
      script.defer = "defer"; // should I use script.setAttribute('defer', 'defer')?
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(script, s);
      if((i+1)==window.includeFiles.length){
         callback();
      }
   }
}

Basically this will let you co like so:

include("http://code.jquery./jquery.min.js");
include("http://code.jquery./jquery.min.js");
include("http://code.jquery./jquery.min.js");
include("http://code.jquery./jquery.min.js");
include("http://code.jquery./jquery.min.js");
initialize(function(){
  //code ready
});

Only problem is it does not test network, witch can only really be done by checking if a function only available in the included library is available. Witch makes raina77ow's answer to use RequireJS a better solution.

The easiest way in my opinion is using head.js http://headjs./

head.js(
  "/path/to/jquery.js", 
  "/google/analytics.js", 
  "/js/site.js", function() {

   // Code that executes when all the scripts have been loaded

});