iframe에 게시하는 방법은 무엇입니까?

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>

인터넷 익스플로러에는 자바 (if work-around here)를 사용하여 동적으로 iframe을 생성 할 때만 발생하는 버그가 있지만 일반 HTML 마크 업을 사용한다면 괜찮습니다. 목표 속성과 프레임 이름은 영리한 닌자 해킹이 아닙니다. HTML 4 Strict 또는 XHTML 1 Strict에서는 더 이상 사용되지 않지만 유효하지는 않지만 3.2 이후 HTML의 일부였으며 공식적으로 HTML5의 일부이며 Netscape 3 이후 거의 모든 브라우저에서 작동합니다.

이 동작은 XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict 및 DOCTYPE이 지정되지 않은 "quirks mode"에서 작동하는 것으로 확인되었으며 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>

내가 제대로이 예제를 실행하지 않는 브라우저 듣고 매우 관심이있을 것입니다.

출처

2008-10-03 19:28:18

으로는 양식의 대상이 IE7, 지저분에서 작동하지 않을 수 있습니다, 아래 지적이를 테스트 할 수 있었다. – NexusRex

@NexusRex - 테스트를 거쳤습니다. IE7에서는 제대로 작동합니다.:) –

+12

IE 7의 문제점은 자바 스크립트를 사용하여 iframe을 생성하면 이름 태그가 설정되지 않은 것입니다 (설정하려고 시도하더라도) 왜 게시 대상이 실패하는지 이유가 있습니다. Internet Explorer 7 용 솔루션 : http://stackoverflow.com/questions/2181385/ie-issue-submitting-form-to-an-iframe-using-javascript – mrD

iframe은 다른 문서를 HTML 페이지에 포함시키는 데 사용됩니다.

양식을 양식 페이지의 iframe에 제출하는 경우 태그의 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을 대상 사용, 파일을 업로드하기 위해

iframe의 너비와 높이를 0으로 설정할 수 있으며 대상을 iframe에 제출하고 양식을 제출하기 전에로드 대화 상자가 열릴 수 있습니다. 그래서 컨트롤은 아직 입력 폼 JSP로 남아 있고 로딩 대화 상자가 열려 있으므로 Ajax 컨트롤을 조롱합니다.

Exmaple

<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-21 04:46:15 kapil

iframe에 게시하는 방법은 무엇입니까?

답변

관련 문제