How to check if iframe is loaded or it has a content

Here are several common methods, with examples provided.

Method One: Using the onload Event

The onload event is commonly used to detect when an iframe has completed loading. It is an intuitive method for verifying if an iframe has loaded.

html
<iframe id="myIframe" src="example.html" onload="alert('Iframe is loaded');"></iframe>

In this example, upon completion of the iframe loading, a notification is displayed to inform the user.

Method Two: Checking Content with JavaScript

By using JavaScript, we can access the document and elements inside the iframe to check its content:

javascript
var iframe = document.getElementById('myIframe');
iframe.onload = function() {
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    if (iframeDocument.body.children.length > 0) {
        console.log("Iframe has content");
    } else {
        console.log("Iframe is empty");
    }
};

This code first retrieves the iframe element, then checks for child elements in the body after the iframe has loaded. This provides a straightforward way to verify content presence.

Method Three: Periodically Checking iframe Content

In certain scenarios, the iframe content is dynamically loaded and may necessitate periodic checks. Utilize setInterval for regular verification:

javascript
var checkIframe = setInterval(function() {
    var iframeDocument = document.getElementById('myIframe').contentDocument || document.getElementById('myIframe').contentWindow.document;
    if (iframeDocument.readyState === 'complete') {
        clearInterval(checkIframe);
        if (iframeDocument.body.children.length > 0) {
            console.log("Iframe loaded and has content");
        } else {
            console.log("Iframe loaded but has no content");
        }
    }
}, 100);

This code establishes a timer to inspect the iframe status every 100 milliseconds. Upon detecting that the iframe content is fully loaded, it halts the checks and outputs results based on whether content is present.

These are several methods for verifying if an iframe has loaded or contains content. In practical development, you should select the appropriate method based on specific requirements.

You can use the iframe's load event to respond when it loads.

javascript
document.querySelector('iframe').onload = function(){
    console.log('iframe loaded');
};

This does not indicate whether the correct content has loaded; to verify this, you can check contentDocument and inspect its body.

javascript
document.querySelector('iframe').onload = function(){
    var iframeBody = this.contentDocument.body;
    console.log('iframe loaded, body is: ', iframeBody);
};

If the iframe targets a different domain than where the code is executed, checking contentDocument will not work. src

The simplest approach:

javascript
function frameload(){
  alert('iframe has loaded')
}

html
<iframe onload="frameload()" src=...>

{"title":"How to Check if an iframe Has Loaded or Contains Content?","content":"I encountered the same issue, and additionally, I need to check if the iframe has loaded, regardless of cross-origin policies. I am developing a Chrome extension that injects certain scripts onto the webpage and displays some content from the parent page within the iframe. I tried the following approach, which was very effective for me.
PS: In my case, I can control the content within the iframe but not the content on the parent website. (The iframe is hosted on my own server.)

First:
Create an iframe with a data- attribute (in my case, this part is located within the injection script)
<iframe id=\"myiframe\" src=\"http://anyurl.com\" data-isloaded=\"0\"></iframe>

In the iframe code, use:

shell
var sourceURL = document.referrer;
window.parent.postMessage('1', sourceURL);

Now, return to the injection script based on my scenario:

shell
setTimeout(function(){
  var myIframe = document.getElementById('myiframe');
  var isLoaded = myIframe.prop('data-isloaded');
  if(isLoaded != '1')
  {
    console.log('iframe failed to load');
  } else {
    console.log('iframe loaded');
  }
}, 3000);

And,

shell
window.addEventListener(\"message\", receiveMessage, false);
function receiveMessage(event)
{
    if(event.origin !== 'https://someWebsite.com') //check origin of message for security reasons
    {
        console.log('URL issues');
        return;
    }
    else {
        var myMsg = event.data;
        if(myMsg == '1'){
            //8-12-18 changed from 'data-isload' to 'data-isloaded
            $(\"#myiframe\").prop('data-isloaded', '1');
        }
    }           
}

It may not fully address this issue, but it was a viable solution for me."}