CODEWITHSUNDEEP
javascript
Ron
Ron

Reputation: 4095

JavaScript - function to load external JS files is needed

Recently I added to my website facebook like button, twitter follow us button and google +1 button. I want their JS scripts to load when I tell them to load.

Therefore, I need a function that load external JS files. I don't need to know when the file finished to load (callback is not needed).

I found some methods/functions on the Internet, but I want to know which would be the best choice for this situation?

4 ways to dynamically load external JavaScript
Dynamically loading JS libraries and detecting when they're loaded
The best way to load external JavaScript

Thanks.

Edit: Added the methods/function I found.

Upvotes: 5

Views: 12616

Answers (4)

florianletsch
florianletsch

Reputation: 465

I would recommend using jQuery's getScript(). For the twitter-button, you would load the corresponding script like that:

$.getScript("//platform.twitter.com/widgets.js")

Of course you would have to load jquery in your script first and do not forget to add the markup needed for the twitter-button in your html.

Upvotes: 7

Madara's Ghost
Madara's Ghost

Reputation: 174937

Something like

function getScript(url) {
    e = document.createElement('script');
    e.src = url;
    document.body.appendChild(e);
}
getScript('jstoload.js');

this?

Upvotes: 3

Zoidberg
Zoidberg

Reputation: 10323

The YUI Loader sounds like a good choice for you. It will also allow you to add your own custom modules, so you can load on demand, as well as load all other JS files that are required as well.

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

This might be helpful:

function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

Upvotes: 5

Related Questions