web-dev-qa-db-ja.com

どうやってiframeに投稿しますか？

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

postiframe
250
Murtaza Mandvi

あなたが「投稿データ」によって何を意味するかによります。 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>

そうでない場合、またはもっと複雑な方法を試している場合は、質問を編集して詳細を含めてください。

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

XHTML 1 Strict、XHTML 1 Transitional、HTML 4 Strict、およびDOCTYPEが指定されていない「Quirksモード」で動作することを確認しました。すべての場合でInternet Explorer 7.0.5730.13を使用します。私のテストケースは2つのファイルで構成されています。古典的なASP on IIS 6を使います。これらは完全にここに再現されているので、この振る舞いを自分で検証することができます。

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>

これらの例が正しく動作しないブラウザについては、私は非常に興味があります。

391
Dylan Beattie

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

この関数は一時的なフォームを作成してから、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の 'name'属性で、dataはJSオブジェクトです。

data={last_name:'Smith',first_name:'John'}
2
Dr Fred

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内のページが同じOriginのものである場合にのみ実行できますが、Chromeをデバッグモードで起動して同じOriginポリシーを無視して任意のページでこれをテストできます。

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;
}
0
Dominique Fortin