페이지에 src 대신 iframe의 콘텐츠 지정
저는 현재 양식의 모든 일반 필드 외에도 사진을 업로드하기위한 파일 입력이있는 양식을 작업 중입니다.이 양식은 onchange가 사진을 iframe에 제출 한 다음 업로드 된 사진을 수정할 필드가있는 양식에 동적으로로드합니다. (이름 및 지역화와 같은). 양식을 중첩 할 수 없기 때문에 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>
iframe에로드 된 html은 다음과 같습니다 (html, head 및 body 태그 무시).
<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>
첫 번째 iframe을로드하는 데 몇 초가 걸리므로 파일 입력이 페이지의 나머지 부분과 함께로드되지 않고 시각적으로 이상적이지 않다는 점을 제외하면 훌륭하게 작동합니다. 다른 페이지를로드 할 필요없이 iframe 콘텐츠를 지정할 수 있다면이 문제를 해결할 수 있습니다 (첫 번째 iframe에서 'file_input_url'로 지정됨).
제 질문은 동일한 문서에서 iframe 콘텐츠를 지정하는 방법이 있습니까, 아니면 src 속성으로 만 지정할 수 있으므로 다른 페이지를로드해야합니까?
콘텐츠를 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>
iframe은 이제 인라인 프레임에 표시 할 페이지의 HTML 콘텐츠를 지정하는 데 사용할 수있는 srcdoc 를 지원합니다 .
다음 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 링크로 변환 합니다.
Guffa가 설명한 내용과 함께 <script type = "text / template"> ... </ script> 설명에 설명 된 기술 을 사용하여 HTML 문서를 특수 script요소 에 저장할 수 있습니다 (에 대한 설명은 링크 참조). 작동 방식). HTML 문서를 문자열로 저장하는 것보다 훨씬 쉽습니다.
'Nice programing' 카테고리의 다른 글
| Eclipse-분할보기의 동일한 .Java 파일? (0) | 2020.10.16 |
|---|---|
| 셀프 조인 설명 (0) | 2020.10.16 |
| 응답 본문이 HTTP-DELETE- 요청에 허용됩니까? (0) | 2020.10.16 |
| 실패한 JUnit 테스트를 즉시 다시 실행하는 방법은 무엇입니까? (0) | 2020.10.16 |
| 회전 및 번역 (0) | 2020.10.16 |