將當前表單數據附加到iframe

我想將當前表單數據附加到iframe，並在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>

然而，insted的附加當前的HTML表單設置爲iFrame是將解碼HTML（請原諒我這個字），以iframe的。這裏是iframe的輸出我得到：

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

請建議。

來源

2013-01-19 sun2

因爲它們在窗口內創建另一個文檔，所以iframe與其他DOM元素不同。

其他小動作是需要等待的iframe裝載所以使用load事件的iframe添加內容

與一個iframe（僅適用於同一個域），則需要使用contents()工作。在contents()有一個新的樹，包括document，html，head和body

/* 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(); 

})

DEMO：http://jsbin.com/otobug/2/edit

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

來源

2013-01-20 00:39:25 charlietfl

謝謝您的答覆。我在下面做了，像冠軍一樣工作：

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-11 00:17:25 sun2

將當前表單數據附加到iframe

回答

相關問題