appending content into a dymanically created iframe gets an empty iframe

问题

I have a jQuery snippet as below:

$.ajax({
  ....
  success: function(myContent) {
    .....
    $('<iframe id="myFrame" name="myFrame">').appendTo('body').ready(function(){
      $('#myFrame').contents().find('body').append(myContent);
    });
    .....
  });
}); 

When the event is triggered at the first time, only an empty iframe displays, but if the event is triggered at the second time, content is appended into the iframe successfully. Any obvious error in this snippet?

回答1:

I believe some browsers need a short delay for it to recognize the DOM of a new iframe. Using a timeout should work:

$('<iframe id="myFrame" name="myFrame">').appendTo("body").ready(function(){
    setTimeout(function(){
        $('#myFrame').contents().find('body').append(myContent);
    },50);
});

回答2:

I think this is what you are looking for:

$('<iframe id="myFrame" name="myFrame">').appendTo('body');
$('iframe').contents().find('body').html(myContent);       

Demo: http://jsfiddle.net/vbNGA/1/

回答3:

This simple code may be use for you, it works fine for me.

$("#iframe_id").contents().find("body").append("Contents to display in iframe");

来源：https://stackoverflow.com/questions/9530455/appending-content-into-a-dymanically-created-iframe-gets-an-empty-iframe