Question

根据对this question的回答，我尝试将元素直接附加到没有iframe属性的空src。

但是，appendChild上的iframe似乎无声地失败。

在下面的代码中，doc.write("Hello World");正常工作，但myform2.appendChild(input2);不会更改框架的innerHTML，也不会引发错误。

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

使用原始Javascript将表单添加到iframe的正确方法是什么？

我正在寻找非jQuery解决方案，因为我想了解魔法是如何工作的，而不仅仅是让jQuery发挥魔力。

Answer 1

我认为这是时间问题。尝试在加载文档后运行脚本：

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

Answer 2

这应该适用于IE 10 +，Firefox和Chrome（以及IE的旧版本）。基本上，我只是创建一个iframe，选择放置它的位置，将其置于其中，然后打开新的iframe的contentWindow.document并将纯HTML / CSS / Javascript编写到其中。

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

我尝试追加DOM元素之前遇到的问题并不总是有效，因此在这种情况下我只是将它们作为字符串传递。我也＆＃34;关闭＆＃34;在附加我需要的HTML之后，通过沙箱（安全首选项）来关闭iframe。

希望此解决方案可以帮助您。

这是一个小提琴：http://jsfiddle.net/fv2DB/

如何将表单写入空iframe？

2 个答案: