jQuery onload - .load() - event no funciona con un iframe cargado dinámicamente

Question

Mi secuencia de comandos carga un iframe cuando el usuario hace clic en un botón. Quiero llamar a otra función después de que se cargue el iframe, pero no está funcionando. El iframe se carga normalmente, pero el evento .load() nunca se llama después de que el iframe termine de cargarse. El iframe contiene contenido del mismo sitio web (sin contenido externo). Lo extraño es que estoy usando la misma técnica que se describe a continuación en algunos otros puntos de mi código y funciona perfectamente. ¿Alguien puede sugerir qué debo verificar a continuación?

Aquí está el código correspondiente:

$('#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

parece algo similar a la pregunta aquí:

jQuery .ready in a dynamically inserted iframe

De esta manera existe el elemento de marco flotante en el Dom con la anexión. Solo cuando configuras la URL se cargará, y en ese momento has adjuntado la función de carga que deseas etiquetar al final. Así que para su código

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

}); 

Answer 2

La razón por la que su ejemplo de código no funciona es porque va a enlazar a un elemento que no existe, a continuación, colocar ese elemento en el DOM cuando no tiene ningún controlador de eventos adjunto a la load evento. Prueba esto:

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

o más cerca de su código original, puede reemplazar .load() con .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 
}); 

Answer 3

Si el documento que va a cargar en el iframe es algo que controles, trate de poner el controlador de carga en ese documento. Si necesita el documento principal que hacer algo después de las cargas iframe puede llamar a una función en el padre del niño:

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

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

Answer 4

Prueba esto:

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

acaba de añadir un poco de encadenamiento, creó el elemento donde el selector generalmente va (esto es posible), y lo anexó al cuerpo.