294

どのようにデータを iframe に投稿しますか?

4

5 に答える 5

438

「投稿データ」の意味によって異なります。タグでHTMLtarget=""属性を使用できるため、次の<form />ように簡単にできます。

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

それ以外の場合、またはより複雑なものを求めている場合は、質問を編集して詳細を含めてください。

Internet Explorer には、Javascript を使用して iframe などを動的に作成する場合にのみ発生する既知のバグがあります (回避策はこちら) が、通常の HTML マークアップを使用している場合は問題ありません。ターゲット アトリビュートとフレーム名は、巧妙な忍者ハックではありません。HTML 4 Strict または XHTML 1 Strict では廃止されましたが (したがって検証されません)、3.2 以降は HTML の一部であり、正式には HTML5 の一部であり、Netscape 3 以降はほぼすべてのブラウザーで動作します。

この動作は、XHTML 1 Strict、XHTML 1 Transitional、HTML 4 Strict で動作し、DOCTYPE が指定されていない「互換モード」で動作することを確認しており、Internet Explorer 7.0.5730.13 を使用するすべての場合で動作します。私のテスト ケースは、IIS 6 で従来の ASP を使用する 2 つのファイルで構成されています。ここに完全に再現されているので、この動作を自分で確認できます。

デフォルト.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>

これらの例を正しく実行しないブラウザについて知りたいです。

于 2008-10-03T19:28:18.953 に答える
32

iframe は、html ページ内に別のドキュメントを埋め込むために使用されます。

フォームをフォーム ページ内の iframe に送信する場合は、タグの target 属性を使用して簡単に送信できます。

フォームの target 属性を 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 に設定してフォームを送信し、フォームを送信する前に読み込みダイアログを開くことができます。そのため、読み込みダイアログが開いた状態でコントロールが入力フォーム jsp に残っているため、ajax コントロールをモックします。

例

<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>
于 2012-06-21T04:46:15.857 に答える