Add dynamic elements to the iframe element than I am creating
I have a litle problem if I create a dynamic IFRAME and I aggregate dynamically the elements into a new iframe. It works If I do this:
var miiframe=document.getElementById("miiframe");
var myElement=content.document.createElement("LABEL");
myElement.innerHTML="blabla";
miiframe.contentDocument.body.appendChild(myElement);
but if i do this it doesn't work:
var miiframe=content.document.createElement("IFRAME");
miiframe.src="about:blank";
document.body.appendChild(miiframe);
var myElement=content.document.createElement("LABEL");
myElement.innerHTML="blabla";
miiframe.contentDocument.body.appendChild(myElement);
I can see the iframe, but I cannot see the label element. Most curious if before appendElement I do and warn that it works !!!
var miiframe=content.document.createElement("IFRAME");
miiframe.src="about:blank";
document.body.appendChild(miiframe);
var myElement=content.document.createElement("LABEL");
myElement.innerHTML="blabla";
alert("now works!!!");
miiframe.contentDocument.body.appendChild(myElement);
Works with DIV element, but I want to do it with IFRAME element !!!
This code is for Firefox. Thanks!!
a source to share
If you put "src" in your iframe, it tries to load that source (even if it is "near: empty"). After the download is done, it will overwrite your shortcut. You can add a listener to wait for the iframe to load:
var miiframe=content.document.createElement("IFRAME");
miiframe.src="about:blank";
miiframe.addEventListener('load', function (e) {
var myElement=content.document.createElement("LABEL");
myElement.innerHTML="blabla";
miiframe.contentDocument.body.appendChild(myElement);
}, false);
document.body.appendChild(miiframe);
a source to share
My case was a little different, I did not specify any source that I was only trying to create an HTML editor, I did something like this:
function init() {
var iframe = document.createElement("iframe");
iframe.setAttributes('id','edit');
document.body.appendChild(iframe);
var y = document.getElementById('edit');
y.contentDocument.designMode = 'On';
}
But it never worked, curiously, when I put some warnings inside some ifs like if ('designMode' in y) and the like, after a few warnings I could write on the iframe ....: S
Thanks a lot for your help, your explanation is clear, the iframe always tries to load ... it overwrites any other instruction before ... so I changed it and now it works 100% :)
function init() {
var iframe = document.createElement("iframe");
iframe.addEventListener('load', function () {
iframe.contentDocument.designMode="on";
}, false);
document.body.appendChild(iframe);
}
a source to share