1

我想将当前表单数据附加到 iframe 并在 iframe 中提交表单而不是原始表单。下面是代码片段

  <script> 
   $(document).ready(function() {
    $("#imageSubmit").click(function(e) {
     e.preventDefault(); 
     $("#wrapper iframe").remove();
     $("#wrapper").append("<iframe src=''>" + $("#imageForm").html()+"</iframe>");
     $("#wrapper iframe form").submit();
     $("#wrapper iframe").load(checkStatus);
    });
   });

   function checkStatus() {
    var status = $.parseJSON($("#wrapper iframe").html());
    if (status.success) {
     alert("File " + status.filename + " uploaded!");
    } else {
     alert("Fail!");
    }
   }
  </script>

<body>
  <div id="wrapper">
   <form name="imageForm" id="imageForm" action="SOMETHING">
    <input type="file" id="imageInput" />
    <input type="submit" id="imageSubmit" />
   </form>
  </div>
</body>

但是，将当前表单 HTML 附加到 iframe 时，它​​会将解码的 HTML（对不起这个词）添加到 iframe。这是我得到的 iframe 输出：

    <iframe>
        &lt;input type="file" id="imageInput"&gt;
        &lt;input type="submit" id="imageSubmit"&gt; 
   </iframe>

请建议。

4

2 回答 2

2

iframe 与其他 DOM 元素不同，因为它们在窗口中创建另一个文档。

另一个小技巧是需要等待 iframe 加载所以使用load事件iframe添加内容

要使用 iframe（仅限同一域），您需要使用contents(). 里面contents()有一棵新树，包括document、和htmlheadbody

/* dummy src to avoid same domain restrictions in some browsers*/
var jsbinIframeSrc='http://jsbin.com/evoger/1';

var $iframe=$('<iframe src="'+jsbinIframeSrc+'" width="400px" height="300px"></iframe>'); 

$("#wrapper").append( $iframe);

var $form=$('#imageForm').on('submit', function(e){
    /* demo code to show that submit works when triggered inside iframe*/
    e.preventDefault();
    $(this).replaceWith('Form was submitted');
})



$iframe.on('load', function(){
    /* unbind "load" so doesn't add form again when submitted*/
    $iframe.off('load');
     /* insert form in iframe body*/
    $(this).contents().find('body').html($form);
    $form.submit();

})

演示：http: //jsbin.com/otobug/2/edit

API 参考：http ://api.jquery.com/contents/

于 2013-01-20T00:39:25.953 回答
0

谢谢您的答复。我按照以下方式做了，像冠军一样工作：

var iframe = "<iframe name='frame' id='frame' style='visibility:hidden' onload='onFrameLoad();'></iframe>";
$('wrapper').append(iframe);
$('#form').attr('target','frame');

function onFrameLoad(cur_form_number) {
.
.
}
于 2013-02-11T00:17:25.650 回答