Question

我正在使用TogetherJS（http://togetherjs.com），我想在DOM准备好后动态调用它。通过head中的脚本标记调用它时，它可以正常工作。动态调用相同的脚本时会出现问题：

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")

这些功能不起作用：

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

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

我得到“ TogetherJS未定义”。

我该怎么办？

编辑：实际上我想在galleria（http://galleria.io）准备就绪后加载它，所以我称之为：

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

EDIT2 ：
在文档togetherjs.com/docs/#extending-togetherjs中找到“推迟初始化”部分。我只是不知道如何更换这一行：

MyApp.onload = callback;

我需要Galleria's.ready事件而不是MyApp.onload。

Answer 1

将脚本节点添加到DOM并不能确保在执行后续代码之前文件已完成加载和解析。基本上，您正在尝试在创建它们之前从TogetherJS执行属性。

只是延迟执行，直到页面加载完毕。

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

动态调用JS脚本

1 个答案: