[英]JavaScript to detect when external javascripts are loading
是否有一種方法(事件監聽器或其他方式)來檢測特定外部JavaScript何時加載/正在加載/已完成加載?
換句話說,瀏覽器是否會在加載,加載和/或加載特定外部腳本時觸發事件?
就我的目的而言,僅僅檢查是否存在已知對象或類似的東西是不夠的。 相反,我需要一些能夠檢測JS文件加載/加載的東西,而不管JS文件的內容如何。
以下示例適用於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);
}
由於所有瀏覽器在處理<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");
});
我為那些想要在加載所有外部文件(動態添加)之后調用函數的人編寫了一個腳本。 它是這樣的:
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>
希望能幫助到你!
如果你可以使用jQuery,試試$.getScript()
。 文檔在這里 。
<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>
這是純粹的猜想和推測; 我沒有嘗試過它,可能有更好的方法來編寫它,但這不會做你想做的事情。 編輯:腳本在瀏覽器看到時加載,而不是事后。 它們將在此之前加載。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.