iframe onload event fire after appending it into some div

Question

iframe onload event fire after appending it into some div. Here is a part of code:

for (var i = 0; i < items.length; i++) {
  addContent(element, items[i], loadData_.bind(this, i, items));
}

function appendNew(element, item, cb) {
  var itemContainer = $('<div>')
    .addClass('someclass');
  var chart = $('<iframe>')
    .css('height', 677)
    .attr('frameBorder', "0")
    .attr('scrolling', 'no')
    .on('load', function() {
      cb();
    });
  itemContainer.append(chart);
  tabContent.append(itemContainer);
}

So, now after this code tabContent.append(itemContainer); load event fired. Why this event fires, while I not set src and load some content? Has any idea?

Answer 1

Though you don't set the src a blank iframe renders into the content. That's why the onload function triggered.

Answer 2

In the case of an iframe, the onload event fires when the iframe is loaded. When an iframe is added to your HTML, it is loaded, so this is why the onload is being executed. On attribute changes it is loaded again. You will need to add the load event handler to your iframe after you have added it to the HTML. Read more here: https://www.w3schools.com/jsref/event_onload.asp