iframe에 어떻게 게시합니까?

StackOverflow https://stackoverflow.com/questions/168455

  •  03-07-2019
  •  | 
  •  

문제

데이터를 iframe에 어떻게 게시합니까?

도움이 되었습니까?

해결책

"데이터 게시"가 의미하는 바에 따라 다릅니다. HTML을 사용할 수 있습니다 target="" a <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>

그렇지 않거나 더 복잡한 것을 겪고 있다면 더 자세한 내용을 포함시키기 위해 질문을 편집하십시오.

Iframes 등을 동적으로 만들 때만 발생하는 Internet Explorer가있는 알려진 버그가 있습니다. JavaScript ( 여기서 작업),하지만 평범한 HTML 마크 업을 사용하고 있다면 괜찮습니다. 대상 속성 및 프레임 이름은 영리한 닌자 해킹이 아닙니다. HTML 4 Strict 또는 XHTML 1 Strim에서는 더 이상 사용되지 않았으므로 유효성이 없지만 3.2 이후 HTML의 일부였으며 공식적으로 HTML5의 일부이며 NetScape 3 이후 거의 모든 브라우저에서 작동합니다.

이 동작을 XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict 및 "Quirks Mode"에서 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>

이 예제를 올바르게 실행하지 않는 브라우저에 대해 듣고 싶습니다.

다른 팁

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

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>

이 기능은 임시 양식을 작성한 다음 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의 '이름'attr이고 데이터는 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;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top