简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  **How to Reliably Determine if an iFrame Has Loaded and Contains Content?**

**How to Reliably Determine if an iFrame Has Loaded and Contains Content?**

DDD
DDDOriginal
2024-10-24 21:48:03705browse

**How to Reliably Determine if an iFrame Has Loaded and Contains Content?**

Determining iFrame Load Status for Content Detection

In web development, it's often necessary to dynamically load content into an iFrame. To ensure proper functionality and avoid potential errors, it's crucial to determine when the iFrame has successfully loaded and contains content.

Problem:

Consider an iFrame with a variable loading time. You need a way to detect whether the iFrame has finished loading or acquired content. Approaches such as iframe.contents().find() or iframe.load(function()) may not always be feasible.

Solution:

Here's a JavaScript function that effectively checks for an iFrame's loaded state:

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

    // Check if loading is complete
    if (iframeDoc.readyState == 'complete') {
        // Loading is complete
        afterLoading();
        return;
    } 

    // Set timeout for re-checking
    window.setTimeout(checkIframeLoaded, 100);
}

function afterLoading(){
    // Execute desired code after iFrame load
}</code>

In the of your HTML document, add the following:

<code class="html"><body onload="checkIframeLoaded();"></code>

This function periodically checks the iFrame's readyState property, which indicates its load status. When readyState equals 'complete,' the iFrame has loaded, and you can execute any desired code through the afterLoading() function.

The above is the detailed content of **How to Reliably Determine if an iFrame Has Loaded and Contains Content?**. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html if for Property function this iframe
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to Determine if an iFrame Has Loaded and Contains Content?Next article：How to Determine if an iFrame Has Loaded and Contains Content?

Related articles

See more