So überprüfen Sie, ob iframe geladen wurde

Question

Bevor Sie antworten, weiß ich über das Ereignis load.

Ich muss überprüfen, ob ein Iframe geladen wurde oder nicht. Mit Bildern kann ich es einfach mit der HTMLImageElement.complete Eigenschaft machen, aber der Iframe scheint das nicht zu haben ... also ... hat er etwas anderes, das man benutzen kann?

Wie können Sie überprüfen, ob ein Laden abgeschlossen hat?

---

Grund: Ich bin zur Zeit durch die Bilder in einem setInterval Schleife Schleife zu überprüfen, ob sie alle geladen haben, und wenn sie haben, ich verblassen sie in einer nach dem anderen. Sieht sehr gut aus. Und ich möchte iframes zu diesem fanciness hinzuzufügen, kann aber nicht herausfinden, wie zu überprüfen, ob die Iframes geladen ...

Answer 1

Bitte versuchen Sie es unter:

<iframe id="my-iframe"></iframe> 
<script> 
    var iframe_document = document.querySelector('#my-iframe').contentDocument; 

    if (iframe_document.readyState !== 'loading') onLoadingCompleted(); 
    else iframe_document.addEventListener('DOMContentLoaded', onLoadingCompleted); 

    function onLoadingCompleted(){ 
     console.log('iFrame loaded!'); 
    } 
</script> 

Answer 2

Wenn alle Anwendungsfälle sind für youtube Spieler, als Sie Youtube's iframe Spieler API verwenden können, um onReady Ereignisse zu erhalten, die Sie wissen lassen, wenn der Spieler bereit ist, verwendet zu werden.

Nachdem sichergestellt ist die iframe api geladen wird, onYoutubePlayerAPIReady() aufgerufen wird, wenn es heißt, Sie YT.Player() anrufen können, um auf einem iframe zu erstellen oder zu betreiben, die zu einem YouTube-Video verknüpft

function onPlayerReady(){ 
    //do work 
} 
player = new YT.Player('container', { 
    height: '390', 
    width: '640', 
    videoId: 'Video's Youtube Id', 
    events: { 
     'onReady': onPlayerReady 
    } 
}); 

Die onReady Eigenschaft wird die api lassen wissen, welcher Callback verwendet werden soll.

Jetzt müssen Sie die iframe api nicht laden/verwenden, um diese zu verwenden. Sie müssen nur die korrekten PostMessage-Aufrufe und Nachrichtenereignisrückrufe selbst implementieren.

Dazu müssen Sie zuerst sicherstellen, dass die URL, die verwendet wird, enablejsapi=1 als Parameter hat. Es weist youtube an, die notwendigen api-Bibliotheken innerhalb des iframes zu laden. zum Beispiel:

https://www.youtube.com/embed/VgC4b9K-gYU 

würde

https://www.youtube.com/embed/VgC4b9K-gYU?enablejsapi=1 

werden Sie müssen dann eine listening und ein addEventListener an postmessage das Fenster des iframe senden. Dies sagt der api, dass es etwas gibt, das auf Ereignisse hören möchte und auf welches Ereignis Sie hören möchten.

var frame = document.querySelector('iframe'); 

var listenEvent = {"event":"listening","id":1,"channel":"test"}; 
frame.contentWindow.postMessage(JSON.stringify(listenEvent),'*'); 

var listenerEvent = { 
    "event":"command", 
    "func":"addEventListener", 
    "args":["onReady"], 
    "id":1, 
    "channel":"test" 
}; 
frame.contentWindow.postMessage(JSON.stringify(listenerEvent),'*'); 

Dann brauchen Sie nur einen message Ereignishandler hinzuzufügen eingehende Nachrichten zu verarbeiten. Jetzt

window.addEventListener('message',function(data,origin){ 
    data = JSON.parse(data); 
    if(data.event == 'onReady'){ 
     //do work 
    } 
}); 

wenn alle Fälle youtube Spieler nicht dann beinhalten kann man kein Glück, als Querursprungsregeln lassen Sie nicht Zugriff auf die dom/Ereignisse des iframe Inhalt. Die Quelle müsste etwas Ähnliches wie das postMessage/Nachrichtensystem implementieren, wie youtube das oben tut.

Demo

window.addEventListener('message', function(event, origin) { 
 
    var data = JSON.parse(event.data); 
 
    if (data.event == 'onReady') { 
 
    onReady(); 
 
    } 
 
}); 
 

 

 
function onReady() { 
 
    console.log("Player ready"); 
 
} 
 

 
var frame = null; 
 
window.addEventListener('load', function() { 
 
    frame = document.querySelector('iframe'); 
 
    var command = { 
 
    "event": "listening", 
 
    "id": 1, 
 
    "channel": "test" 
 
    }; 
 

 
    frame.contentWindow.postMessage(JSON.stringify(command), '*'); 
 

 
    command = { 
 
    "event": "command", 
 
    "func": "addEventListener", 
 
    "args": ["onReady"], 
 
    "id": 1, 
 
    "channel": "test" 
 
    }; 
 
    frame.contentWindow.postMessage(JSON.stringify(command), '*'); 
 
});

<iframe src="https://www.youtube.com/embed/VgC4b9K-gYU?enablejsapi=1"></iframe>