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!!

+2


a source to share


2 answers


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

      

+7


a source


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

      

+2


a source







All Articles