본문 바로가기

HTML/JS/CSS

아이프레임(iframe) 높이와 넓이 자동 조절 스크립트


출처 : http://www.technote.co.kr/php/technote1/board.php?board=apple&page=10&command=body&no=224


아이프레임(iframe) 높이와 넓이 자동 조절 스크립트



<script>
// IFRAME 사이즈 자동 조절
function doIframeResize(tdId, frameId)
{
tdId.height = frameId.document.body.scrollHeight+10;
tdId.width = frameId.document.body.scrollWidth;
} </script>

위의 스크립트를 아이프레임을 넣고자하는 페이지에 넣은후 다음과 같이 하시면됩니다.

<iframe id="test_frame" src="넣고자하는주소(예 http://technote.co.kr" width="97%" height="100%" ALLOWTRANSPARENCY="true" frameborder="0" scrolling="no" onload="doIframeResize(test, test_frame);"></iframe>

2개를 넣을경우는  frame id와dolframeResize(   )의 값을 아래와 같이 변경해주시면되고 이런식으로 하면 넣고 싶은 대로 여러개의 아이프레임을 넣을 수가 있습니다.

<iframe id="test_frame1" src="넣고자하는주소(예 http://technote.co.kr" width="97%" height="100%" ALLOWTRANSPARENCY="true" frameborder="0" scrolling="no" onload="doIframeResize(test1, test_frame1);"></iframe>

미리보기    http://dalgubeol.net/data/iframe.htm