페이지에 src 속성 대신 iframe의 콘텐츠 지정

88

현재 사진을 업로드하기위한 일부 파일 입력을 포함하는 양식을 작업 중입니다. 에 onchange()사진을 제출 iframe한 다음 업로드 된 사진을 양식에 동적으로로드 하는 입력에 대한 이벤트가 있습니다 (예 : name 및 geo-localization ).

내가 둥지를 양식 할 수 없습니다 때문에이 file_input또한에 포함되어 있습니다 iframe. 결국 나는 iframe다른 내부를 사용합니다 iframe. 그래서 다음과 같은 것이 있습니다.

<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>

과에로드 된 HTML은 iframe합니다 (제외 같은 것입니다 html, head그리고 body태그)

<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>

첫 번째를로드하는 데 몇 초가 걸리므로 iframe파일 입력이 페이지의 나머지 부분과 함께로드되지 않는다는 점을 제외하면 잘 작동 합니다. 이것은 시각적으로 이상적이지 않습니다. 나는 지정할 수 있다면 나는 그것을 해결할 수 iframe(가 지정한 다른 페이지를로드 할 필요없이 내용을 file_input_url처음에를 iframe).

iframe동일한 문서에서 콘텐츠 를 지정하는 방법이 src있습니까? 아니면 다른 페이지를로드해야하는 속성으로 만 지정할 수 있습니까?

html iframe

— Orlox
소스

해당 iframe을로드하는 데 "몇 초"가 걸리지 않아야합니다. 나는 그것이 1 밀리 초의 10 분의 1과 "물린 시간"(물린 시간도 밀리 초 여야 함)을 더한 것과 비슷할 것이라고 기대한다. 모든 지연의 원인을 조사해야합니다. 서버에 문제가있을 수 있습니다.

— Abhi

95

.write()콘텐츠를 iframe 문서에 넣을 수 있습니다 . 예:

<iframe id="FileFrame" src="about:blank"></iframe>

<script type="text/javascript">
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
   doc.close();
</script>

— 구파
소스

1

그러나이 가능성에 대해 생각했다면 iframe에로드해야하는 html은 복잡하고 iframe에 작성하기 위해 자바 스크립트로 전적으로 처리하면 구현이 너무 모호해질 것입니다 (내가 선호하는 지점까지). 그대로 두십시오).

— orlox 2010

2

@orlox : Ajax를 사용하여 서버에서 콘텐츠를 가져 와서 삽입합니다. 당신이 그 길을 가고 싶어하지 않는 경우, 숨겨진 수 있도록 div콘텐츠와 요소와 그것의 내용을 배치 iframe사이 <body>와 </body>.

— 스택 형 '2013-09-20

11

더 많은 내가 그들을 증오 더 iframe을 제한에 대한 자세한 내용

— 존 목련

1

이 방법을 사용하여 작은 따옴표를 어떻게 이스케이프합니까? 일부는 HTML에 중요하고 (예 : class = 'example') 일부는 CSS에 중요하며 (예 : font-family : 'Verdana';) 일부는 콘텐츠입니다 (예 : George O'Malley).

— Dan Bechard

2

@Dan : 아포스트로피로 구분 된 JavaScript 문자열에서 사용할 값을 이스케이프하려면 먼저 백 슬래시를 이스케이프 한 다음 아포스트로피를 이스케이프합니다. 예를 들어 C #을 사용하여 코드에 문자열을 출력합니다 doc.write('<%= html.Replace("\\", "\\\\").Replace("'", "\\'") %>');..

— Guffa

36

iframe은 이제 인라인 프레임에 표시 할 페이지의 HTML 콘텐츠를 지정하는 데 사용할 수있는 srcdoc 를 지원합니다 .

— 아유시 굽타
소스

2

IE는이 권한을 지원하지 않지만 caniuse 에서 최신 상태를 확인할 수 있습니다.

— Ayush Gupta

MDN에 대한 문서

— Benoit Blanchon

22

다음 data:에서 URL을 사용할 수 있습니다 src.

var html = 'Hello from <img src="http://stackoverflow.com/favicon.ico" alt="SO">';
var iframe = document.querySelector('iframe');
iframe.src = 'data:text/html,' + encodeURIComponent(html);

<iframe></iframe>

스 니펫 확장

iframe에서 srcdoc =“…”와 src =“data : text / html,…”의 차이점 입니다.

JavaScript를 사용하여 HTML을 data : text / html 링크로 변환 합니다.

— 사용자
소스

1

자바 스크립트도 필요하지 않습니다. src속성은 이스케이프 처리 된 경우 인라인으로 지정할 수 있습니다 (예 rawurlencode: PHP에서 사용) .<iframe src="<?php echo htmlspecialchars('data:text/html,' . rawurlencode($content)); ?>"></iframe>

— Jake

Microsoft는이에 대한 지원을 추가로 거의 동시에 이에 대한 지원을 추가 srcdoc하고, srcdoc이 작업을 수행하는 더 나은 방법입니다. 데이터 URL은 이미지와 CSS에 대해서만 광범위하게 지원됩니다. 내가 아는 한 Internet Explorer 버전이 iframe에서 지원하지 않는 한.

— Abhi

6

Guffa가 설명한 내용과 함께 <script type = "text / template"> ... </ script> 설명에 설명 된 기술 을 사용하여 HTML 문서를 특수 script요소 에 저장할 수 있습니다 (에 대한 설명은 링크 참조). 작동 방식). HTML 문서를 문자열로 저장하는 것보다 훨씬 쉽습니다.

— 시모
소스

다시 생각해 보면 전체 HTML 문서에서는 잘 작동하지 않습니다. 과 같은 태그는 <html>, <body>, <script>단지 문서의 렌더링을 깨고 브라우저를 혼동한다.

— ximo 2011 년

이는 문제가되지 않는 것으로 보이며 스크립트 내부의 HTML 태그는 무시됩니다.

— HBP 2013 년

당신 말이 맞아요 :) 제가 글을 썼을 때 아직 그 기술을 시도 해본 적이 없었고 어딘가에서 그 가정을 집어 들었을 것입니다. 나는 나중에<script> 태그 브라우저에서 무시 . 수정 해 주셔서 감사합니다!

— ximo