프론트 프로그램/javascript
iframe안에서 자신의 iframe 선택하기, iframe 높이 조절하기
수유산장
2022. 1. 5. 10:29
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>