iframe에 어떻게 게시합니까?

답변:

407

"포스트 데이터"의 의미에 따라 다릅니다. 태그 에서 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의 일부였으며 공식적으로 HTML5의 일부이며 Netscape 3 이후 거의 모든 브라우저에서 작동합니다.

이 동작을 XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict 및 DOCTYPE이 지정되지 않은 "쿼크 모드"에서 작동하는 것으로 확인했으며 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
12
IE 7의 문제점은 자바 스크립트를 사용하여 iframe을 생성하면 이름 태그가 설정되지 않은 이유 (설정하려고하더라도)가 게시 대상이 실패하는 이유입니다. IE7을위한 솔루션 : stackoverflow.com/questions/2181385/…
— mrD
출력 프레임의 내용을 파일에 저장하는 방법이 있습니까 (예 : 양식이 제출 된 서버의 응답)?
— ZeroGraviti
@ZeroGraviti "파일로 저장"의 의미가 명확하지 않습니다. 당신이 할 수있는 일은 IFRAME에 양식을 제출하고 stackoverflow.com/questions/1012437/…에 설명 된대로 응답이 Content-Disposition 헤더를 설정 하도록하는 것입니다. 따라서 사용자가 "제출"을 클릭하면 IFRAME에 게시됩니다. 브라우저는 응답을 받고 파일을 로컬 컴퓨터에 저장하라는 메시지를 표시합니다. 그게 당신이 무엇을하고 있습니까?
— Dylan Beattie
@DylanBeattie, 유스 케이스를 명확히하겠습니다. targethtml 의 속성 으로 설정된 iframe을 채울 수있었습니다 <form>. 양식이 게시되고 대상 iframe에서 내용을 볼 수 있으면이 내용을 파일로 저장하는 옵션을 사용자에게 제공하려고합니다. 이것이 바로 제가 요청한 것입니다. 더 명확해야하는지 알려주세요.
— ZeroGraviti
25

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 대상 사용
이 속성을 사용하면 특히 파일 업로드와 같은 경우에 파일을 업로드하기 위해 양식을 제출해야하는 경우와 같은 경험을 생성하는 데 사용될 수 있습니다.

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>
— 카필
소스
감사합니다. <iframe>은 </ form> 이후에 와야합니다.
— Igor Fomenko
2

이 함수는 임시 양식을 만든 다음 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'}
— 프레드 박사
소스
0

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;
}
— 도미니크 포틴
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.