JavaScript - function to load external JS files is needed

Question

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.

Try to rephrase your question, I don't undestand what you're asking... — deviousdodo, Nov 26 '11 at 12:48
You should add the list of methods/functions that you found. — tereško, Nov 26 '11 at 12:54

score 7 · Answer 1 · answered Nov 26 '11 at 12:55

7

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.

answered Nov 26 '11 at 12:55

florianletsch

465
4
16

1

jQuery is not a good solution. need pure javascript based solution. – Ron Nov 26 '11 at 13:33

score 5 · Accepted Answer · answered Nov 26 '11 at 12:51

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);
}

I said I dont need callback function, altohugh I can remove the part that relate to the callback. why do you add it to the head tag and not to the body, does it really matter? + Shouldnt I remove the element as soon as it loaded? — Ron, Nov 26 '11 at 13:35

score 3 · Answer 3 · answered Nov 26 '11 at 12:54

3

Something like

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

this?

answered Nov 26 '11 at 12:54

Madara's Ghost

172,118
50
264
308

Is it corss browser solution?, should I remove the element once its loaded? – Ron Nov 26 '11 at 13:37

score 0 · Answer 4 · answered Nov 26 '11 at 12:52

0

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.

answered Nov 26 '11 at 12:52

Zoidberg

10,137
2
31
53

JavaScript - function to load external JS files is needed

4 Answers4

Linked