How can I write a form into an empty iframe?

Question

Based on an answer to this question, I am trying to append elements directly into an empty iframe with no src attribute.

However, it seems appendChild on the iframe fails silently.

In the code below, doc.write("Hello World"); works correctly, but myform2.appendChild(input2); does not change the innerHTML of the frame, and also does not throw an error.

<html>
    <body>  
     <iframe  name = "myframe" id = "myiframe"> 
     </iframe>  
    <script>
    var myform2 = document.createElement("form");
    var input2 = document.createElement("input");
    input2.name = "quantity";
    input2.value = "10";

    myform2.appendChild(input2);
        </script>

    <script>

    var getFrame = document.getElementById('myiframe');
    var doc = getFrame.contentDocument || getFrame.contentWindow.document;

//  doc.write("Hello World");
    doc.body.appendChild(myform2); // Does not work.
    </script>   
    </body>
</html>

What is the correct way to add a form into the iframe using raw Javascript?

I am looking for non-jQuery solutions, because I want to understand how the magic works, rather than just letting jQuery perform the magic.

Works fine for me -> http://jsfiddle.net/S8GAB/ – adeneo May 07 '14 at 21:31 — adeneo, May 07 '14 at 21:31
It works on jsfiddle but doesn't seem to work on Firefox. – merlin2011 May 07 '14 at 21:32 — merlin2011, May 07 '14 at 21:32
Try it like this http://jsfiddle.net/S8GAB/1/ – adeneo May 07 '14 at 21:34 — adeneo, May 07 '14 at 21:34

score 1 · Accepted Answer · answered May 07 '14 at 21:59

I think it's a matter of timing. Try to run your script after document has been loaded:

<body onload="loadMe();">

    <iframe  name = "myframe" id = "myiframe"> 
    </iframe>  

    <script>

    function loadMe() {    
        var myform2 = document.createElement("form");
        var input2 = document.createElement("input");
        input2.name = "quantity";
        input2.value = "10";

        myform2.appendChild(input2);

        var getFrame = document.getElementById('myiframe');
        var doc = getFrame.contentDocument || getFrame.contentWindow.document;
        doc.body.appendChild(myform2); // Does not work.
    }    
    </script>  


</body>

http://jsfiddle.net/GR7LJ/2/

You don't have to wait until the parent document loads. You can just wait for the iframe's load event. — guest, May 07 '14 at 22:09
Agree. @merlin2011 I believe you can move that onload event from body to iframe. — Yuriy Galanter, May 07 '14 at 22:25

code4coffee · Answer 2 · 2014-05-07T21:54:04.850

This should work in IE 10+, Firefox, and Chrome (and maybe older versions of IE). Basically, I am just creating an iframe, selecting where to place it, placing it inside of it, then opening the new iframe's contentWindow.document and writing pure HTML/CSS/Javascript into it.

var newIframe = document.createElement("iframe");
var container = document.getElementById("container");
container.appendChild(newIframe);
var iframeContent = newIframe.contentWindow.document;
iframeContent.open();
iframeContent.write("<input type='text' />");
iframeContent.close();
newIframe.setAttribute("sandbox", "allow-scripts"); // optional sandboxing

I've run into issues before where attempting to append DOM elements does not always work so in this scenario I just pass them in as a string. I also "close" off the iframe by sandboxing it (security preference) after appending the HTML I need.

Hope this solution helps you.

Here's a fiddle: http://jsfiddle.net/fv2DB/

How can I write a form into an empty iframe?

2 Answers2