appending content into a dymanically created ifram

Question

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?

Answer 1

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

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

Answer 2

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

Answer 3

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/