Fatal编程技术网
  • javascript/
  • Javascript 如何将表单写入空的iframe？

Javascript 如何将表单写入空的iframe？

javascript html iframe

Javascript 如何将表单写入空的iframe？,javascript,html,iframe,Javascript,Html,Iframe,基于对的回答，我试图将元素直接附加到一个空的iframe，没有src属性 但是，iframe上的appendChild似乎会无声地失败 在下面的代码中，doc.write（“Hello World”）工作正常，但myform2.appendChild（input2）不会更改帧的innerHTML，也不会引发错误 <html> <body> <iframe name = "myframe" id = "myiframe"> &

基于对的回答，我试图将元素直接附加到一个空的
iframe
，没有
src
属性

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

在下面的代码中，
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>




var myform2=document.createElement（“表单”）；
var input2=document.createElement（“输入”）；
input2.name=“数量”；
输入2.value=“10”；
myform2.appendChild（输入2）；
var getFrame=document.getElementById（'myiframe'）；
var doc=getFrame.contentDocument | | getFrame.contentWindow.document；
//博士写（“你好世界”）；
doc.body.appendChild（myform2）；//不起作用。


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


我正在寻找非jQuery的解决方案，因为我想了解魔法是如何工作的，而不仅仅是让jQuery执行魔法
 这应该适用于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



var newIframe=document.createElement（“iframe”）；
var container=document.getElementById（“容器”）；
container.appendChild（newIframe）；
var iframeContent=newIframe.contentWindow.document；
iframeContent.open（）；
iframeContent.write（“”）；
iframeContent.close（）；
setAttribute（“沙盒”、“允许脚本”）；//可选沙箱


我以前遇到过这样的问题：尝试附加DOM元素并不总是有效，所以在这个场景中，我只是将它们作为字符串传递。在附加所需的HTML之后，我还通过沙箱（安全首选项）来“关闭”iframe

希望此解决方案对您有所帮助


这里有一把小提琴：
我想这是个时间问题。在加载文档后尝试运行脚本：


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




函数loadMe（）{
var myform2=document.createElement（“表单”）；
var input2=document.createElement（“输入”）；
input2.name=“数量”；
输入2.value=“10”；
myform2.appendChild（输入2）；
var getFrame=document.getElementById（'myiframe'）；
var doc=getFrame.contentDocument | | getFrame.contentWindow.document；
doc.body.appendChild（myform2）；//不起作用。
}    



对我来说很好->它可以在JSFIDLE上工作，但在Firefox上似乎不起作用。像这样试试吧，你不必等到父文档加载。您只需等待iframe的加载事件即可。同意@merlin2011我相信您可以将onload事件从body移动到iframe。