iframe 콘텐츠높이에 따라 height 조절하기
웹사이트를 만들다보면 iframe이 필요한 상황있습니다.
하지만 iframe으로 콘텐츠를 불러올 때, height 값을 다 불러오지 못하고 스크롤을 생성합니다.
그때 자바스크립트로 높이조절 스크립트를 적어줘야 올바르게 높이를 불러옵니다.
그럼 콘텐츠 높이에따라 iframe을 불러오는 방법을 알아보겠습니다.
기본 코드
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>아이프레임 높이 조절 예제</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
</body>
</html>결과 화면
일반적으로 아이프레임을 사용하면 위와 같은 화면으로 iframe이 불러와지게 됩니다.
그럼, 자동으로 높이 조절하는 방법과 스크롤제거하는 방법을 알아보겠습니다.
높이 조절, 스크롤 제거 방법
html
<iframe src="iframe.html" id="iframe" onload="Height();" frameborder="0" scrolling="no" style="overflow-x:hidden; overflow:auto; width:100%; min-height:500px;"></iframe>frameborder="0" scorlling="no"로 아이프레임에 기본적으로 생성되는 스크롤과 border를 처리해줍니다.
그리고 style에서 overflow 속성을 추가해주고, width : 100%, min-height값을 지정해줍니다.
js
<script type="text/javascript">
function calcHeight() {
var the_height =
document.getElementById('iframe').contentWindow.
document.body.scrollHeight;
document.getElementById('iframe').height =
the_height;
document.getElementById('iframe').style.overflow = "hidden";
}
</script>
결과 화면
혹시, 다른 서버의 iframe을 불러올 때의 높이 조절 방법이 궁금하시다면 아래의 포스팅을 참고해주세요 :)
eunyoe.tistory.com/entry/%EB%8B%A4%EB%A5%B8-%EB%8F%84%EB%A9%94%EC%9D%B8-iframe-%EB%86%92%EC%9D%B4-%EC%9E%90%EB%8F%99-%EC%A1%B0%EC%A0%88eunyoe.tistory.com/entry/%EB%8B%A4%EB%A5%B8-%EB%8F%84%EB%A9%94%EC%9D%B8-iframe-%EB%86%92%EC%9D%B4-%EC%9E%90%EB%8F%99-%EC%A1%B0%EC%A0%88
'Web > jquery' 카테고리의 다른 글
| [jQuery] display 여부에 따른 조건문(if else) (0) | 2021.04.20 |
|---|---|
| [jQuery] if문을 통한 class 존재 여부 확인 (hasClass) (0) | 2021.04.19 |
| [Bootstrap] 부트스트랩 시작하기 및 사용 방법 (0) | 2021.04.14 |
| jQuery UI를 사용하여 tooltip 구현 (0) | 2021.04.03 |
| jquery 이벤트가 익스플로러(ie)에서 실행 안될 때 해결방법 (0) | 2021.03.30 |