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>'));
});

Answer 1

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');
    });

});