How to execute javascript callback when IFRAME is finished loading?

In web development, the <iframe> element is commonly used to embed another page within the current page. Listening for the iframe's load completion is a common requirement, especially when you need to perform certain operations after the iframe has fully loaded.

Using the onload Event

JavaScript provides a straightforward method to listen for the iframe's load completion, namely the onload event. This event is triggered after the content within the iframe has fully loaded.

Example Code:

html
<iframe id="myIframe" src="https://example.com" onload="iframeLoaded()"></iframe>
<script>
function iframeLoaded() {
    console.log('IFrame has fully loaded');
    // You can safely manipulate the iframe's DOM or perform other tasks here
}
</script>

In the above example, the <iframe> element has an onload attribute bound to a function named iframeLoaded. When the iframe finishes loading, this function is called.

Important Considerations

1. Cross-Origin Restrictions: If the page loaded within the iframe is from a different origin than the parent page, due to the browser's same-origin policy, you will not be able to access the DOM inside the iframe.

2. Multiple Load Events: If the content within the iframe changes after loading (e.g., internal navigation), the onload event may be triggered multiple times.

3. Dynamically Created Iframes: If the iframe is added to the page dynamically via JavaScript, you need to set the onload event before inserting it into the DOM to avoid missing the load event.

Example of Dynamically Created Iframe:

javascript
var iframe = document.createElement('iframe');
iframe.onload = function() {
    console.log('Dynamically created iframe has loaded');
};
iframe.src = "https://example.com";
document.body.appendChild(iframe);

Conclusion

By using the onload event, we can effectively listen for the iframe's load completion. This is very useful when handling embedded external content and resources, but be mindful of handling potential cross-origin issues and the timing of event triggers. In development, properly utilizing these techniques can help us better control page behavior and user interaction.