Dynamically create an iframe and attach onload event to it

Question

I have created a iframe dynamically and added a src attribute to it. Then I have appended this iframe to body of the page. Know I want to attach an onload

Answer 1

I just tried this and it worked in Chrome:

var iframe = document.createElement('iframe');
// append iframe to DOM however you like then:
iframe.contentWindow.parent.location.href // properly gives parent window's href.

W3school says contentWindow is supported in all major browsers.

Answer 2

Some browsers do have the onload event for an iframe, first you should try to attach it before setting the iframe's src attribute.

I'd avoid using it altogether since in certain browsers it might not fire under certain conditions (e.g. the target was in cache in IE).

You could user a timer to check if the frame's contentWindow's readystate is complete

var inter = window.setInterval(function() {
    if (frame.contentWindow.document.readyState === "complete") {
      window.clearInterval(inter);
      // grab the content of the iframe here
    }
}, 100);

Answer 3

I doubt you can attach an onload event to an iframe. It will not work on all browsers. You can on the other hand check if the iframe was loaded by:

window.onload=function()
{
var iframe=document.getElementById('myframe');
if(iframe) 
    alert('The iframe has just been loaded.');
}

Or use AJAX to load the content in your container. With AJAX you can set a proper load-complete event.

Answer 4

You can add a load event listener to the iframe's contentWindow, which is just like any other Window.

Here's an example:

      iframe = document.createElement('iframe')
      iframe.setAttribute('src', 'https://example.com/')

      document.getElementsByTagName('body')[0].appendChild(iframe)
      const onLoaded = function() {
        console.log('iframe loaded');
      }
      if (iframe.contentWindow.document.readyState === 'complete') {
        console.log('already loaded')
        onLoaded()
      } else {
        iframe.contentWindow.addEventListener('load', onLoaded)
      }