How can I detect whether an iframe is loaded?

In web development, detecting whether an iframe has loaded is a common requirement that can be achieved through several different methods.

Method 1: Using JavaScript to Listen for the iframe's load Event

This is the most straightforward approach. You can determine if an iframe has loaded completely by listening for the load event. Here's an example:

html
<iframe id="myIframe" src="https://example.com"></iframe>
<script>
  document.getElementById('myIframe').addEventListener('load', function() {
    console.log('Iframe has loaded completely');
  });
</script>

Method 2: Checking the iframe's Content

If you need to verify whether an iframe has successfully loaded specific content, you can access its contentWindow or contentDocument properties. However, due to the same-origin policy, this method only applies to iframes sharing the same origin as the main page. Here's an example:

javascript
var iframe = document.getElementById('myIframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

if (iframeDoc.readyState === 'complete') {
  console.log('Iframe content has loaded completely');
}

Method 3: Using MutationObserver to Monitor DOM Changes

If you need to monitor when an iframe element is added to the DOM, you can use MutationObserver. This API listens for DOM changes and notifies you when modifications occur. Here's an example:

javascript
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach(function(node) {
        if (node.tagName === 'IFRAME') {
          console.log('A new iframe has been added to the DOM');
        }
      });
    }
  });
});

var config = { childList: true, subtree: true };

observer.observe(document.body, config);

Method 4: Periodic Checking

In some scenarios, you may need to periodically verify if an iframe has loaded. This can be implemented using a timer:

javascript
var checkIframeLoaded = setInterval(function() {
  var iframe = document.getElementById('myIframe');
  if (iframe.contentWindow.document.readyState === 'complete') {
    console.log('Iframe has loaded completely');
    clearInterval(checkIframeLoaded);
  }
}, 100);

Summary

The choice of method depends on your specific requirements, such as whether you need to detect cross-origin iframes or check the loading status of specific content within the iframe. In practice, you should select the most appropriate method based on project requirements and environmental constraints.