回答:
「投稿データ」の意味に依存します。タグでHTML target=""属性を使用できるため<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>
それ以外の場合、またはより複雑なものを探している場合は、質問を編集して詳細を含めてください。
JavaScriptを使用してiframeなどを動的に作成しているときにのみ発生するInternet Explorerの既知のバグがあります（回避策はここにあります）が、通常の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つのファイルで構成されています。ここで完全に再現されているので、この動作を自分で確認できます。
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>
これらの例を正しく実行しないブラウザについて聞いていただければ非常に興味があります。
targethtmlの属性として設定されているiframeを設定できました<form>。フォームが投稿され、ターゲットのiframeにコンテンツが表示されたら、このコンテンツをファイルに保存するオプションをユーザーに提供します。これは私が尋ねるつもりだったものです。これをもっと明確にする必要があるかどうか教えてください。
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>
この関数は一時的なフォームを作成し、jQueryを使用してデータを送信します。
function postToIframe(data,url,target){
$('body').append('<form action="'+url+'" method="post" target="'+target+'" id="postToIframe"></form>');
$.each(data,function(n,v){
$('#postToIframe').append('<input type="hidden" name="'+n+'" value="'+v+'" />');
});
$('#postToIframe').submit().remove();
}
targetはターゲットiFrameの「名前」属性で、dataはJSオブジェクトです。
data={last_name:'Smith',first_name:'John'}
iframeの入力を変更し、そのiframeからフォームを送信する場合は、次のようにします
...
var el = document.getElementById('targetFrame');
var doc, frame_win = getIframeWindow(el); // getIframeWindow is defined below
if (frame_win) {
doc = (window.contentDocument || window.document);
}
if (doc) {
doc.forms[0].someInputName.value = someValue;
...
doc.forms[0].submit();
}
...
通常、これを実行できるのは、iframe内のページが同じ生成元からのものである場合のみですが、デバッグモードでChromeを起動して同じ生成元ポリシーを無視し、任意のページでこれをテストできます。
function getIframeWindow(iframe_object) {
var doc;
if (iframe_object.contentWindow) {
return iframe_object.contentWindow;
}
if (iframe_object.window) {
return iframe_object.window;
}
if (!doc && iframe_object.contentDocument) {
doc = iframe_object.contentDocument;
}
if (!doc && iframe_object.document) {
doc = iframe_object.document;
}
if (doc && doc.defaultView) {
return doc.defaultView;
}
if (doc && doc.parentWindow) {
return doc.parentWindow;
}
return undefined;
}