iframe 안의 콘텐츠 높이에 따라서 iframe의 높이를 조절하는 방식이다.
자식에서 자신의 iframe을 선택하는 것은
window.frameElement 로 접근할수 있다.
window.frameElement.height 는 아이프레임의 높이.
document.querySelector("body").clientHeight + 20 자식 body 영역의 높이에 적당한 높이를 더하여 부모 아이프레임 높이를 조절하면 된다.
parent.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Parent</title>
</head>
<body>
<div>
<iframe src="./child.html"></iframe>
</div>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Child</title>
<script>
window.onload = function() {
window.frameElement.height = document.querySelector("body").clientHeight + 20;
}
</script>
</head>
<body>
<div id="content">
자식 입니다.<br>
자식 입니다.<br>
자식 입니다.<br>
자식 입니다.<br>
자식 입니다.<br>
자식 입니다.<br>
자식 입니다.<br>
자식 입니다.<br>
자식 입니다.<br>
자식 입니다.<br>
자식 입니다.<br>
자식 입니다.<br>
자식 입니다.<br>
</div>
</body>
</html>
'프론트 프로그램 > javascript' 카테고리의 다른 글
| javascript 날짜 월 더하기 (0) | 2022.11.18 |
|---|---|
| Javascript 주민번호, 주민등록번호 체크 (0) | 2021.10.21 |