CODEWITHSUNDEEP
javascriptjquery
mark smith
mark smith

Reputation: 20907

loading js files dynamically via another js file?

is there anyway to load other JS files from within a single JS file. I would like to point my individual pages "ITS" js file and that js file would load jquery, other js files.

I know i can just pop all these into the html i.e.

I was thinking of separations of concerns so i was wondering if anything exists already without me reinventing the wheel....

That i would just need to edit home.js to change what other js (jquery etc) are loaded for home.htm ... home.htm would just point to home.js

Thanks

Upvotes: 7

Views: 1414

Answers (5)

molokoloco
molokoloco

Reputation: 4602

For external domain JS link 

var loadJs = function(jsPath) { 
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.setAttribute('src', jsPath);
    document.getElementsByTagName('head')[0].appendChild(s);
};
loadJs('http://other.com/other.js');

For same domain JS link (Using jQuery) 

var getScript = function(jsPath, callback) {
    $.ajax({
        dataType:'script',
        async:false,
        cache:true,
        url:jsPath,
        success:function(response) {
            if (callback && typeof callback == 'function') callback();
        }
    });
};
getScript('js/other.js', function() { functionFromOther(); });

Upvotes: 3

Bill Barnhill
Bill Barnhill

Reputation: 984

I'd suggest you take a look at labJS. It's a library made specifically to load Javascript. As they say..."The core purpose of LABjs is to be an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time."

See the labJS home page for more information.

Upvotes: 1

Eli Grey
Eli Grey

Reputation: 35903

This is similar to Darin's solution, except it doesn't make any variables.

document.getElementsByTagName('head')[0].appendChild(document.createElement("script")).src = "helper.js";

Upvotes: 2

emills
emills

Reputation: 521

Google offers centrally hosted versions of the major javascript libraries like jQuery. They can be dynamically loaded using the google loader.

http://code.google.com/apis/ajaxlibs/documentation/

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1039438

You can take a look at dynamic script loading. Here's an excerpt from the article:

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'helper.js';
head.appendChild(script);

Upvotes: 15

Related Questions