Wie kann man zuverlässig überprüfen, ob ein IFrame geladen und für die Interaktion in JavaScript bereit ist?

So überprüfen Sie, ob ein IFrame geladen ist oder Inhalte enthält

Beim Umgang mit Iframes, deren Laden unterschiedlich lange dauern kann, ist dies der Fall erforderlich, um deren Ladezustand zu ermitteln. Dieser Artikel stellt eine zuverlässige Lösung vor, um zu überprüfen, ob ein Iframe geladen ist oder Inhalte enthält.

Der bereitgestellte Code nutzt die JavaScript-Funktion setTimeout, um den Status des Iframes regelmäßig zu überprüfen. Der Schlüssel liegt hier in der Funktion checkIframeLoaded, die einen rekursiven Ansatz verwendet, um die Eigenschaft readyState des Iframes kontinuierlich zu überprüfen.

Wenn der Ladevorgang abgeschlossen ist, wie durch angezeigt einen readyState-Wert von „complete“, wird die Funktion afterLoading aufgerufen. Diese Funktion führt die gewünschten Aktionen aus, nachdem der Iframe geladen wurde.

Hier ist der Codeausschnitt:

<code class="javascript">function checkIframeLoaded() {
    // Get iframe element
    var iframe = document.getElementById('i_frame');
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

    // Check loading status
    if (iframeDoc.readyState == 'complete') {
        // Loading complete, call afterLoading function
        afterLoading();
        return;
    } 

    // Not loaded, check again in 100 milliseconds
    window.setTimeout(checkIframeLoaded, 100);
}

function afterLoading(){
    alert("Iframe loaded");
}</code>

Um diese Lösung zu verwenden, fügen Sie einfach den Code in Ihr HTML-Body-Tag ein oder rufen Sie checkIframeLoaded manuell, wenn der Iframe zum Laden bereit ist. Dieser Ansatz bewältigt effektiv unterschiedliche Iframe-Ladezeiten und ermöglicht es Ihnen, Aktionen auszuführen, sobald der Iframe vollständig geladen ist oder Inhalte enthält.

Das obige ist der detaillierte Inhalt vonWie kann man zuverlässig überprüfen, ob ein IFrame geladen und für die Interaktion in JavaScript bereit ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!