首頁  >  文章  >  web前端  >  如何可靠地檢查 IFrame 是否已載入並準備好在 JavaScript 中進行互動?

如何可靠地檢查 IFrame 是否已載入並準備好在 JavaScript 中進行互動?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-10-25 02:50:02864瀏覽

How to Reliably Check if an IFrame is Loaded and Ready for Interaction in JavaScript?

如何檢查IFrame 是否已加載或有內容

在處理可能需要不同時間加載的iframe 時,它有必要確定它們的載入狀態。本文提供了一個可靠的解決方案來檢查 iframe 是否已載入或有內容。

提供的程式碼利用 JavaScript 的 setTimeout 函數定期檢查 iframe 的狀態。這裡的關鍵在於 checkIframeLoaded 函數,它採用遞歸的方式不斷檢查 iframe 的 readyState 屬性。

載入過程是否完成,如下所示readyState 值為“complete”,則呼叫 afterLoading 函數。此函數在 iframe 載入後執行所需的操作。

以下是程式碼片段:

<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>

要使用此解決方案,只需將程式碼包含在HTML body 標籤中或呼叫checkIframeLoaded 。這種方法可以有效地處理不同的 iframe 載入時間,並允許您在 iframe 完全載入或有內容後執行操作。

以上是如何可靠地檢查 IFrame 是否已載入並準備好在 JavaScript 中進行互動?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn