如何使用jQuery将html动态加载到iFrame中？

问题描述：

我正在使用 iframe 文件上传器（因此我的文件上传器似乎是ajax）。我正在尝试将该表单放在我的页面上并将其插入 iframe 。然后我将在 iframe 中提交表单。但是，它不起作用。这是我的代码：

I'm working on an iframe file uploader (so my file uploader appears to be ajax). I'm trying to take the form on my page and insert it into an iframe. Then I will submit the form inside the iframe. However, it isn't working. Here is my code:

jQuery：

function submitFile() {
    $(document).ready(function() {
        if ($('[name=files]').val() != "")
        {
            var fileForm = $('#attachFile').html();
            $('#emptyDiv').html('<iframe name="hiddenIframe" id="hiddenIFrame">'+fileForm+'</iframe>');
        }
    });
}

HTML：

<body>
    <div id="emptyDiv"></div>
    <div id="attachFile">
        <form action="my_file.php" method="post" enctype="multipart/form-data" id="uploadFile">
            <input type="file" name="files" id="files">
            <input id="fileUploadButton" type="submit" name="upload" value="Upload File" onclick="submitFile()">
        </form>
    </div>
</body>

这显然不是一个完整的解决方案，但我注意到在提交表单后我确实设法将 iframe 插入< div id =emptyDiv> 元素。但是，在 iframe 中是以下代码：

This obviously isn't a complete solution, but I notice that after submitting the form I do manage to get the iframe inserted into the <div id="emptyDiv"> element. However, inside the iframe is the following code:

#document
<html>
    <head></head>
    <body></body>
</html>

但我希望在 iframe 里面看到什么>是位于表单< div id =attachFile> 内的html内容。我缺少什么？

But what I expect to see inside the iframe is the html contents located inside the form <div id="attachFile">. What am I missing?

答

您不要尝试将表单复制到隐藏的iframe，而是将表单提交给隐藏的iframe。将表单的目标属性（或属性）设置为iframe的名称。

You don't try to copy the form to a hidden iframe, you submit the form to the hidden iframe. Set the target attribute (or property) of the form to the name of the iframe.

var fileForm = $('#attachFile form').prop('target', 'hiddenIframe');
$('#emptyDiv').html('<iframe name="hiddenIframe" id="hiddenIFrame"></iframe>');

或

<form action="my_file.php" method="post" enctype="multipart/form-data" id="uploadFile" target="hiddenIframe">
    <input type="file" name="files" id="files">
    <input id="fileUploadButton" type="submit" name="upload" value="Upload File" onclick="submitFile()">
</form>

如何使用jQuery将html动态加载到iFrame中？

相关推荐