jQuery onload - .load() - event not working with a dynamically loaded iframe

Question

My script loads an iframe when the user clicks a button. I want to call another function after the iframe loads, but it's not working. The iframe does load normally, but the .load() event never gets called after the iframe finishes loading. The iframe contains content from the same website (no external content). The strange thing is that I'm using the same technique described below at a few other points in my code and it works perfectly. Can anyone suggest what I should check next?

Here's the relevant code:

$('#myIframe').load(function () {
    alert('iframe loaded');
});

$('#someButton').live('click', function () {
    $('body').append($('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>'));
});

score 12 · Accepted Answer · edited May 23 '17 at 12:00

12

Seems somewhat similiar to the question here:

jQuery .ready in a dynamically inserted iframe

This way the Iframe element exists in the Dom with the append. Only when you set the Url will it load, by which point you've attached the load function you wish to tag on the end. So for your code

$('#someButton').live('click', function () {

    $('body').append($('<iframe id="myIframe" width="100%"></iframe>'));
    $('#myIframe').attr('src',"https://www.mywebsite.com");

    $('#myIframe').load(function () {
        alert('iframe loaded');
    });

});

edited May 23 '17 at 12:00

Community

1
1

answered Nov 22 '11 at 20:25

Chris

3,114
1
18
27

1

I ran into a similar bug with Firefox. Specifically, if a new `iframe` element is created and inserted into the DOM but an `src` attribute is not specified, the `load` event will still fire. I detailed my use-case and work around incase anyone runs into the same thing: http://web.onassar.com/blog/2013/03/03/firefox-is-calling-the-load-event-to-soon-on-an-iframe/ – onassar Mar 04 '13 at 03:33

score 1 · Answer 2 · answered Nov 22 '11 at 20:33

The reason your code example does not work is because you are binding to an element that does not exist, then placing that element into the DOM when it has no event handler attached to the load event. Try this:

$('#someButton').live('click', function () {
    var $iframe = $('<iframe id="myIframe" src="" width="100%"></iframe>').load(function () {
        alert('iframe loaded');
    }).attr('src', 'https://www.mywebsite.com');
    $('body').append($iframe);
});

Or closer to your origional code, you can replace .load() with .live('load'):

$('#myIframe').live('load', function () {
    alert('iframe loaded');
});

$('#someButton').live('click', function () {
    $('body').append('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>');//notice I removed the $() around the append code as it is unnecessary
});

score 1 · Answer 3 · answered Nov 22 '11 at 20:35

Try this:

$("<iframe id='myId'></iframe>").appendTo("body")
    .attr('src', url)
    .load(function() 
     {
         callback(this);
     });

Just added some chaining, created the element where the selector usually goes (this is possible), and appended it to the body.

score 0 · Answer 4 · answered Nov 22 '11 at 20:33

If the document you are loading in the iframe is something you control, try putting the load handler into that document. If you need the parent document to do something after the iframe loads you can call a function in the parent from the child:

// in parent doc
function myIframeLoaded() {
   // do something
}

// in iframe doc
$(document).load(function() {   // or .ready()
   parent.myIframeLoaded();
}

jQuery onload - .load() - event not working with a dynamically loaded iframe

4 Answers4

Linked