[HTML] iframe 알아보기

웹 서비스를 만들다보면 현재 내 문서에 다른 문서들을 삽입하고 싶은 경우가 있을 것입니다.

가령 다른 서비스 페이지를 호출한다든가, 유투브 영상을 삽입한는것들 입니다.

이럴 경우 사용할 수 있는 HTML 태그가 iframe 입니다.

iframe은 하나의 독립적인 Document를 생성하게 되므로 iframe을 호출한 Document와는 완전 별개의 서비스로 동작하게 됩니다.

따라서 개발시 페이지를 구성할때 iframe상에 컨텐츠를 올려서 구성하게 될 경우에 유지보수측면에서 상당한 비용이 들것라고 예상됩니다.

예를들어 각 iframe 페이지마다 리소스를 다시 로드해야하는데 운영중 발생한 문제를 해결하고 이를 페이지에 반영하기 위해선

다시 각 iframe 페이지에 적용을 해줘야하기 때문입니다.

따라서 개인적으로 많은 수의 iframe을 사용하여 페이지를 구성하는것은 추천하지 않습니다.

하지만 적절히 사용하면 유용한 부분이 있기 때문에 추가적인 사용법을 소개하고자 합니다.

iframe 호출 방법

1. static하게 고정된 페이지를 호출하는 방법은 매우 간단합니다.

iframe 속성에 src가 있는데 이를 설정해주면 됩니다.

예시 :: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe

2. HTML상에 iframe을 생성해놓고 스크립트상에서 다이나믹하게 호출하고 싶다면 form 태그를 활용하여 호출해주면 됩니다.

<iframe style="min-height:800px; width:100%" name="mapView"></iframe>

var html = "<form method='post' action='URL' id='tempForm' target='mapView'></form>";

$('body').prepend(html);

$('#tempForm').submit();

$("#tempForm").remove();

3. 2번에 이어 인자값을 함께 넘겨주고 싶다면, form 태그의 input 태그를 활용하면 됩니다.

<iframe style="min-height:800px; width:100%" name="mapView"></iframe>

var html = "<form method='post' action='URL' id='tempForm' target='mapView'>"

+ "<input type='hidden' name='type' value='value' >"

+ "</form>";

$('body').prepend(html);

$('#tempForm').submit();

$("#tempForm").remove();

자료 출처

• w3school :: http://www.w3schools.com/tags/tag_iframe.asp