用于检测外部javascripts何时加载的JavaScript

Question

是否有一种方法（事件监听器或其他方式）来检测特定外部JavaScript何时加载/正在加载/已完成加载？

换句话说，浏览器是否会在加载，加载和/或加载特定外部脚本时触发事件？

就我的目的而言，仅仅检查是否存在已知对象或类似的东西是不够的。 相反，我需要一些能够检测JS文件加载/加载的东西，而不管JS文件的内容如何。

Answer 1

以下示例适用于Chrome。 它在head标签的onload事件上附加一个处理程序，然后添加一个外部javascript文件。 加载文件后，将捕获事件并显示警报。

http://jsfiddle.net/francisfortier/uv9Fh/

window.onload = function() {
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script"); 

    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", "http://code.jquery.com/jquery-1.7.1.min.js");

    head.addEventListener("load", function(event) {
        if (event.target.nodeName === "SCRIPT")
        {
            alert("Script loaded: " + event.target.getAttribute("src"));
        }
    }, true);

    head.appendChild(script); 
}

Answer 2

由于所有浏览器在处理<script>标记时都会阻止“UI线程”，因此您可以依赖已加​​载的预先存在的标记。

如果要动态加载脚本，则可以侦听<script>标记的load事件。

function loadScript(src, callback) {
    var script  = document.createElement("script");
    script.setAttribute("src", src);
    script.addEventListener("load", callback);
    document.getElementsByTagName("script")[0].insertBefore(script);
};

loadScript("http://code.jquery.com/jquery-1.7.1.min.js", function(){
    alert("loading is done");
});

Answer 3

我为那些想要在加载所有外部文件（动态添加）之后调用函数的人编写了一个脚本。 它是这样的：

 var file = []; var loaded = []; var head = document.getElementsByTagName('head')[0]; var fileOnLoad = // Pass the arrays to your function (function(file, loaded){ return function(){ loaded.push(true); // Print the number of files loaded document.getElementById("demo").innerHTML += "<br>"+loaded.length+" files loaded"; if(file.length == loaded.length){ alert("All files are loaded!"); } }})(file, loaded); //////////////////////////////////////////////// //// //// //// Add the external files dynamically //// //// //// //////////////////////////////////////////////// file[0] = document.createElement('script'); file[0].src = "https://maps.googleapis.com/maps/api/js?v=3.exp"; file[0].onload = fileOnLoad; head.appendChild(file[0]); file[1] = document.createElement('script'); file[1].src = "http://code.jquery.com/jquery-latest.js"; file[1].onload = fileOnLoad; head.appendChild(file[1]); file[2] = document.createElement('script'); file[2].src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"; file[2].onload = fileOnLoad; head.appendChild(file[2]); file[3] = document.createElement('link'); file[3].rel = "stylesheet"; file[3].href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"; file[3].onload = fileOnLoad; head.appendChild(file[3]); file[4] = document.createElement('link'); file[4].rel = "stylesheet"; file[4].href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"; file[4].onload = fileOnLoad; head.appendChild(file[4]); 

 <div id="demo">0 file loaded</div> 

希望能帮助到你！

Answer 4

如果你可以使用jQuery，试试$.getScript() 。 文档在这里 。

Answer 5

<script onload>加载完成后将<script onload> 。

您将无法执行以下操作：

<script src="/foo.js"></script>
<script src="/bar.js"></script>
<script>
function alertonload(src){
   console.log(src+' is loaded');
}
scripts = document.getElementsByTagName('script');
for(var i=0; i<scripts.length; i++){
    scripts[i].onload = function(){ alertonload(scripts[i].src); };
}
</script>

这是纯粹的猜想和推测; 我没有尝试过它，可能有更好的方法来编写它，但这不会做你想做的事情。 编辑：脚本在浏览器看到时加载，而不是事后。 它们将在此之前加载。