dynamic invocation of JS script

Question

I'm using TogetherJS (http://togetherjs.com) and I want to invoke it dynamically once the DOM is ready. When calling it through the script tag in head it works properly. The problem appears when invoking the same script dynamically:

function loadjsfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
    var fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript")
    fileref.setAttribute("src", filename)
}
if (typeof fileref!="undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjsfile("https://togetherjs.com/togetherjs-min.js", "js")

These functions don't work then:

TogetherJS.hub.on('init', function (msg) {
    console.log("init");
});

TogetherJS.on("ready", function () {
    console.log("ready");
});

I get "TogetherJS is not defined".

What can I do?

Edit: Actually I want to load it after galleria (http://galleria.io) is ready, so I'm calling it like:

Galleria.ready(function(){
   loadjsfile("https://togetherjs.com/togetherjs-min.js", "js");
})

Edit2:
Found "Deferring Initialization" section in the docs togetherjs.com/docs/#extending-togetherjs. I just don't know how to replace this line:

MyApp.onload = callback;

I need Galleria's.ready event instead of MyApp.onload .

attach an onload handler to the script tag & run the relevant code within it. — Ivo, May 18 '15 at 02:07
Actually I want to load it after galleria (http://galleria.io) is ready, so I'm calling it like Galleria.ready(function(){loadjsfile("https://togetherjs.com/togetherjs-min.js", "js"); }) . Can I use the onload handler there somehow? — John Kornick, May 18 '15 at 02:14

Will Reese · Answer 1 · 2015-05-18T02:32:22.340

Adding the script node to the DOM doesn't ensure that the file has finished loading and parsing before subsequent code is executed. Basically, you are trying to execute properties from TogetherJS before they've been created.

Just delay execution until the page has loaded.

function loadjsfile(filename, filetype){

    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", filename);
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref);
        //call TogetherJS methods after script has loaded
        fileref.onload = function() {
            TogetherJS.hub.on('init', function (msg) {
                console.log("init");
            });

            TogetherJS.on("ready", function () {
                console.log("ready");
            });
        };
    }
}

loadjsfile("https://togetherjs.com/togetherjs-min.js", "js");

This works when I load the js file from a remote host but not when I load it from localhost. It must be that the network delay "fixes" the "not loaded yet" problem. This also means that it doesn't respect the onload directive and that it might work or it might not. How can I make this consistent? I don't want to add a timeout there, it's too hacky. — John Kornick, May 18 '15 at 15:32
Found "Deferring Initialization" section in the docs https://togetherjs.com/docs/#extending-togetherjs. I just don't know with what to replace this line "MyApp.onload = callback;". I need Galleria's.ready event instead of MyApp.onload. How can i do this? — John Kornick, May 18 '15 at 20:39

dynamic invocation of JS script

1 Answers1