2008-10-03 59 views

回答

356

取決於「發佈數據」的含義。您可以使用一個<form />標記HTML target=""屬性,所以它可能是那樣簡單:

<form action="do_stuff.aspx" method="post" target="my_iframe"> 
    <input type="submit" value="Do Stuff!" /> 
</form> 

<!-- when the form is submitted, the server response will appear in this iframe --> 
<iframe name="my_iframe" src="not_submitted_yet.aspx"></iframe> 

如果這不是它,或者你是更復雜的東西后,請編輯您的問題,包括更多的細節。

使用Javascript(有一個work-around here),但只要使用普通的HTML標記,就可以了,只有當您使用Javascript動態創建iframe等時纔會發生Internet Explorer的一個已知錯誤。目標屬性和框架名稱不是一些聰明的忍者破解;雖然它是在HTML 4棄用(並因此將不會驗證)嚴格或XHTML 1嚴格來說,這是HTML的一部分,因爲3.2,它的正式HTML5的一部分,它在幾乎所有的瀏覽器,因爲網景3.

工作

我已經驗證過此行爲與XHTML 1 Strict,XHTML 1 Transitional,HTML 4 Strict一起使用,並且在沒有指定DOCTYPE的「quirks模式」下工作,並且它在所有使用Internet Explorer 7.0.5730.13的情況下均可正常工作。我的測試用例由兩個文件組成,在IIS 6上使用經典ASP;他們在這裏被完整地轉載,所以你可以自己驗證這個行爲。

的default.asp

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
    <title>Form Iframe Demo</title> 
    </head> 
    <body> 
    <form action="do_stuff.asp" method="post" target="my_frame"> 
    <input type="text" name="someText" value="Some Text" /> 
    <input type="submit" /> 
    </form> 
    <iframe name="my_frame" src="do_stuff.asp"> 
    </iframe> 
    </body> 
</html> 

do_stuff.asp

<%@Language="JScript"%><?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
    <title>Form Iframe Demo</title> 
    </head> 
    <body> 
    <% if (Request.Form.Count) { %> 
    You typed: <%=Request.Form("someText").Item%> 
    <% } else { %> 
    (not submitted) 
    <% } %> 
    </body> 
</html> 

我會聽到不正確運行這些例子中的任何瀏覽器非常感興趣。

+1

正如指出的下方,表格上的目標可能無法在IE7 - 你努力想測試。 – NexusRex 2011-02-08 22:23:23

19

iframe是用於嵌入HTML頁面內的另一個文件。

如果表單被表單頁面內提交的iframe,那麼它可以很容易地使用標記的目標屬性來達到的。

形式的目標屬性設置爲iframe標籤的名稱。

<form action="action" method="post" target="output_frame"> 
    <!-- input elements here --> 
</form> 
<iframe name="output_frame" src="" id="output_frame" width="XX" height="YY"> 
</iframe>   

高級iframe的目標使用
該屬性也可用於生產像經歷一個ajax,尤其是在像文件上傳的情況下,在這種情況下,它成爲強制性提交表單,以上傳文件

可以將iframe設置爲寬度和高度爲0,並且可以提交表單並將目標設置爲iframe,並在提交表單之前打開加載對話框。所以,它嘲笑ajax控件,因爲控件仍然保留在輸入窗體jsp上,並且加載對話框打開。

〔實施例

<script> 
$("#uploadDialog").dialog({ autoOpen: false, modal: true, closeOnEscape: false,     
      open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); } }); 

function startUpload() 
{    
    $("#uploadDialog").dialog("open"); 
} 

function stopUpload() 
{    
    $("#uploadDialog").dialog("close"); 
} 
</script> 

<div id="uploadDialog" title="Please Wait!!!"> 
      <center> 
      <img src="/imagePath/loading.gif" width="100" height="100"/> 
      <br/> 
      Loading Details... 
      </center> 
</div> 

<FORM ENCTYPE="multipart/form-data" ACTION="Action" METHOD="POST" target="upload_target" onsubmit="startUpload()"> 
<!-- input file elements here--> 
</FORM> 

<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;" onload="stopUpload()"> 
     </iframe> 
相關問題