Question

我正在使用以下JavaScript代码，我试图找到文件已下载并添加到我页面的标题中：

function loadjscssfile(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)
    }
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
            fileref.setAttribute("rel", "stylesheet")
            fileref.setAttribute("type", "text/css")
            fileref.setAttribute("href", filename)
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
}



loadjscssfile("jquery.js","js");

我通常使用以下代码在我的图片加载后查找：

    document.getElementById("header_logo").src = "logo.png"; // load top logo

var header_logo = document.getElementById("header_logo"); 
    header_logo.onload = function(e) {  
    // do something here, the file has loaded
}

但是一旦我的JS被加载，我就无法确定如何检查..

有什么想法吗？

（我不能使用jQuery。）

Answer 1

您可以向onload事件添加一项功能：

function loadjscssfile(filename, filetype, onload) {
    //if filename is a external JavaScript file
    if (filetype == "js") { 
        var fileref = document.createElement('script');
        fileref.type = "text/javascript");
        fileref.onload = onload;
        fileref.src = filename);
        document.getElementsByTagName("head")[0].appendChild(fileref);
        return;
    }

    //if filename is an external CSS file
    if (filetype == "css") { 
        var fileref = document.createElement("link");
        fileref.rel = "stylesheet";
        fileref.type = "text/css";
        fileref.onload = onload;
        fileref.href = filename;
        document.getElementsByTagName("head")[0].appendChild(fileref);
        return;
    }
}



loadjscssfile("jquery.js","js", function() { alert(this.src); });

Answer 2

在HTML 4.01中，body和frameset元素支持load事件，尽管许多元素支持img元素，有些支持脚本元素。

在HTML5中，script elements具有 beforescriptexecute ， afterscriptexecute 和加载在脚本元素生命周期中相关时间调度的事件。但是，许多使用的浏览器可能无法支持这些事件，因此不能依赖它们。

查看脚本是否已加载的最强大的方法是测试由要执行的最后一位代码分配值的变量的值，例如，最终陈述如：

var loadedScripts = loadedScripts || {};
loadedScripts.fooScript = true;

然后你可以测试它：

if (loadedScripts.fooScript) {
  // loaded

} else {
  // not loaded
}

加载Javascript并在加载后检查

2 个答案: