아이프레임 높이를 자동으로 조절(iframe height)하기

Javascript

by 자기 2022. 2. 1. 18:25

728x90

아이프레임 iframe 내의 컨텐츠의 길이에 따라 동적으로 높이 height를 조절하는 방법입니다.

아이프레임 iframe을 사용하지 않을래야 않을 수가 없는 현실!

웹개발자들이라면 많은 분들이 공감하시지요.

아이프레임 iframe의 높이를 고정값으로 주거나

100%로 줄 수도 있지만

contents 내용의 양과 길이에 따라 세로 스크롤 없이 모두 보여주어야 할 때가 있지요.

이럴 땐 이렇게.

소스코드

<script type = "text/javascript">
function iHeight(){
var iHeight = document.getElementById('myframe').contentWindow.document.body.scrollHeight;
document.getElementById('myframe').height = iHeight;
}
</script>
<body>
   <iframe src="contentPage.html" onload="iHeight();" id="myframe" style="width:100%; min-height:100px;"></iframe>
</body>

tip.

contentPage.html의 내용이 일반적인 텍스트 위주의 내용이면 상관없겠지만

혹시 로딩이 오래 걸리는 컨텐츠인 경우, 예를 들어 그래프나 챠트를 로딩하는 경우에는

약간의 딜레이가 발생할 수 있기 때문에 setTimeout으로 아이프레임의 높이를

지연설정하도록 해 주는 것이 좋아요.

<script type = "text/javascript">
function iHeight(){
   var iHeight = document.getElementById('myframe').contentWindow.document.body.scrollHeight;
   document.getElementById('myframe').height = iHeight;
}
function delayHeight(){
   setTimeout("iHeight();",1000);
}
</script>
<body>
   <iframe src="contentPage.html" onload="delayHeight();" id="myframe" style="width:100%; min-height:100px;"></iframe>
</body>

728x90

'Javascript' 카테고리의 다른 글

[자바스크립트] javascript로 더블클릭 막기(중복클릭 방지) (0)	2022.11.10
부트스트랩 스윗얼러트 SweetAlert로 알림창 만들기 (0)	2022.08.22
부트스트랩(Bootstrap) 템플릿 10가지 소개 (0)	2022.08.19
[jquery] selectbox text를 기준으로 셀렉트박스 동적으로 선택하기 (1)	2022.01.21
[jquery] selectbox text를 기준으로 셀렉트박스 동적으로 선택하기 (0)	2022.01.18