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
– deviousdodo, Commented Nov 26, 2011 at 12:48
You should add the list of methods/functions that you found. — tereško
– tereško, Commented Nov 26, 2011 at 12:54

florianletsch · Accepted Answer · 2011-11-26 12:55:32Z

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, 2011 at 12:55

florianletsch

4655 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ron Over a year ago

jQuery is not a good solution. need pure javascript based solution.

Sudhir Bastakoti · Accepted Answer · 2011-11-26 12:51:38Z

5

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

answered Nov 26, 2011 at 12:51

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

1 Comment

Ron Over a year ago

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?

Madara's Ghost · Accepted Answer · 2011-11-26 12:54:38Z

3

Something like

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

this?

answered Nov 26, 2011 at 12:54

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

1 Comment

Ron Over a year ago

Is it corss browser solution?, should I remove the element once its loaded?

Zoidberg · Accepted Answer · 2011-11-26 12:52:17Z

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, 2011 at 12:52

Zoidberg

10.4k2 gold badges34 silver badges53 bronze badges

Collectives™ on Stack Overflow

JavaScript - function to load external JS files is needed

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related