是否有一种方法(事件监听器或其他方式)来检测特定外部javascript何时即将加载/正在加载/已完成加载?
换句话说,当浏览器即将加载,加载和/或加载特定外部脚本时,它是否会触发事件?
就我的目的而言,仅仅检查一个已知对象是否存在或类似的东西是不够的。相反,无论JS文件的内容如何,我都需要能够检测到JS文件正在加载/加载的内容。
答案 0 :(得分:15)
以下示例适用于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);
}
答案 1 :(得分:5)
由于所有浏览器在处理<script>
标记时都会阻止“UI线程”,因此您可以依赖已加载的预先存在的标记。
如果您动态加载脚本,则可以收听<script>
标记的加载事件。
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");
});
答案 2 :(得分:1)
我为那些想要在加载所有外部文件(动态添加)后调用函数的人编写了一个脚本。它是这样的:
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]);
&#13;
<div id="demo">0 file loaded</div>
&#13;
希望它有所帮助!
答案 3 :(得分:0)
如果您可以使用jQuery,请尝试$.getScript()
。文档here。
答案 4 :(得分:0)
<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>
这是纯粹的猜想和推测;我没有尝试过,可能有更好的方法来编写它,但不会做你想做的事情。编辑:脚本在浏览器看到时加载,而不是事后。它们将在此之前加载。