Question

If I have a page which contains an iframe:

<iframe src="blank.html" id="frame"></iframe>

and I run the following javascript:

var iframe = document.getElementById("frame");
var content = iframe.contentDocument || iframe.contentWindow;
content = content.documentElement || content.document;
content.innerHTML = "Test";

my iframe ends up with the content “Test”. However, if I create the iframe in script (e.g.)

var iframe = document.createElement("iframe");
iframe.id = "frame";
iframe.src = "blank.html";
document.body.appendChild(iframe);

and then run the first snippet, I end up with a blank iframe. I've noticed that I do get a flash of the content I tried to set - is there an event I can subscribe to on the iframe to let me know it's okay manipulate (e.g. its DOM ready event?)

Answer 1

It flashes because you updating the DOM before its been set to blank.html;

var iframe = document.createElement("iframe");
iframe.id = "frame";
iframe.src="about:blank"; //or blank.html
iframe.onload = function() {
   var domdoc = iframe.contentDocument || iframe.contentWindow.document;
   domdoc.write("Test");
   alert("..or..")
   domdoc.body.innerHTML = "<em>Cake</em>";    
}
document.body.appendChild(iframe);