Question

I am looking at creating javascript API methods for my application similar to how the Facebook or the Twitter Javascript SDK works. Could someone please advice on resources that can help me develop Javascript methods similarly. I intend to do the following:

• The user should be able to load the Javascript asynchronously.
• Once the Javascript is loaded, call a method to load an iframe on a specific element.

Appreciate if people could help me on how to achieve this?

Answer 1

It’s quite straightforward to do such a thing.

Loading the library asynchronously is easy, and has nothing to do with facebook, it’s a javascript thing, for example using facebooks’ example:

(function(d){
    var js, 
        id = "LIB_ID", 
        ref = d.getElementsByTagName('script')[0];

    if (d.getElementById(id)) {
        return;
    }

    js = d.createElement("script");
    js.id = id;
    js.async = true;
    js.src = "URL_OF_LIB";
    ref.parentNode.insertBefore(js, ref);
}(document));

That will load your js asynchronously.

In order to be able to “notify” that the library is loaded you can use the method facebook is using which is to define a callback on the window, so the user of your lib will do something like:

window.libLoaded = function() {
        // Do what ever when the library is loaded
}

And in your lib code, at the end just call that callback:

window.libLoaded();

Creating an iframe dynamically is very easy as well:

function loadFrame(url, domEl) {
        var frame = document.createElement("iframe");
        frame.src = url;
        domEl.appendChild(frame);
}

However, you won’t be able to communicate between the iframe document and the main document since (I assume) they won’t share the same domain, and the browser will prevent that due to the same origin policy.