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

How to Determine iFrame Load or Content Presence

Problem:

You seek a method to ascertain if an iFrame has successfully loaded or contains content, as standard approaches may not suffice. Determining the loaded state is crucial to triggering specific actions or handling scenarios where loading takes excessive time.

Solution:

To effectively address this issue, consider the following approach:

<script><br>function checkIframeLoaded() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// Obtain the iFrame element
var iframe = document.getElementById('i_frame');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

// Evaluate loading status
if (  iframeDoc.readyState  == 'complete' ) {
    // Loading is completed; execute desired functionality
    afterLoading();
    return;
} 

// Loading is incomplete; re-check in 100 milliseconds
window.setTimeout(checkIframeLoaded, 100);

Copy after login

}

function afterLoading(){

alert("I am here");

}

This script operates as follows:

1. Obtain iFrame Element: The script locates the iFrame element by its ID.
2. Check Loading Status: It examines the iFrame's readyState property. When set to 'complete,' it indicates that loading is complete and triggers the afterLoading() function.
3. Recursive Checking: If loading is not complete, the script waits 100 milliseconds before re-evaluating the iFrame's status. This recursive approach ensures that the script periodically checks until loading is complete.
4. Execute Custom Function: Upon completion, the afterLoading() function can be used to carry out any desired actions, such as displaying a notification or further processing the loaded content.

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