웹마스터 팁
iframe 그때그때 달라요 ~ [높이자동변경]
2005.02.18 18:59
Kims 홈피 놀러가기 ~
iframe 높이 자동으로 설정하기
이번에는 홈페이지 제작시 유용하게 사용되는 iframe 에서
내용물(?)의 길이에 맞춰 자동으로 높이가 조절되게 하는 방법을 알아봅니다.
우선 두개의 소스문이 있습니다. 높이를 자동으로 조절하기 위한
스크립트문과 아이프레임 삽입코드입니다.
첫번째 소스
아래소스는 자바스크립트문입니다. 이 소스를 Html문서에서
body 문 아래에 삽입합니다.
(스크립트문은 위치에 따라 큰 차이는 없지만 윗 부분에 차례로 정리해야
나중에 수정하거나 관리에도 좋습니다.)
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;</span>
iframe 높이 자동으로 설정하기
이번에는 홈페이지 제작시 유용하게 사용되는 iframe 에서
내용물(?)의 길이에 맞춰 자동으로 높이가 조절되게 하는 방법을 알아봅니다.
우선 두개의 소스문이 있습니다. 높이를 자동으로 조절하기 위한
스크립트문과 아이프레임 삽입코드입니다.
첫번째 소스
아래소스는 자바스크립트문입니다. 이 소스를 Html문서에서
body 문 아래에 삽입합니다.
(스크립트문은 위치에 따라 큰 차이는 없지만 윗 부분에 차례로 정리해야
나중에 수정하거나 관리에도 좋습니다.)
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;</span>
//change the height of the iframe
document.getElementById('the_iframe'+
').height=
the_height;
}
//-->
두번째 소스
아래소스는 iframe 삽입 코드 입니다. 원하는 위치에 아래 소스를
삽입하세요 일반적인 iframe 삽입문과는 달리 몇가지가 첨가 되어있는데요
스크립트문의 기능을 호출 한다고 생각하시면 됩니다.
onLoad="calcHeight();"
src="http://hex254.zerois.net"
scrolling="NO"
frameborder="0"
height="0">
Kims 홈피 놀러가기 ~
댓글 15
-
김경태
2005.09.06 12:12
음...수정만 하면 높이 넓이까지 자동으로 되지 않나요?.. -
kim's
2005.03.10 14:24
<html>
<head>
<title>iframe 높이 자동 조절</title>
</head>
<script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
//-->
</script>
<body>
<iframe width="700" id="the_iframe"
onLoad="calcHeight();"
src="http://hex254.zerois.net/kims/main.php"
scrolling="NO"
frameborder="0"
height="0">
</iframe>
</body>
</html>
요렇게 써서 하니깐 저는 되네요 ^^ -
June
2005.03.08 10:06
height을 왜 "0"으로 주는거죠? "0"으로 하니까 아무 내용도 안 나오고 height="100%" width="100%"로 하니까 내용은 나오는데 자동으로 높이가 맞춰지진 않네요 -.-;; -
Cocoa-Mind
2005.04.07 01:51
정말 감사합니다. 답답할 때 우연찮게 찾은 팁에 해결되었어요~~~^^ -
Cocoa-Mind
2005.04.07 22:18
function calcHeight(the_iframe) {
//find the height of the internal page
var the_height=
document.getElementById(the_iframe).contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById(the_iframe).height=
the_height;
}
calcHeight('main_body_iframe');
calcHeight('sub_menu_iframe');
이렇게 응용 가능 해요~~ -
신공
2005.04.13 22:38
이것 게시판 아이프레임은 안되나요...
안되는데요........
되면 얼마나 좋을까.......... -
헐랭이
2005.07.21 23:22
찾고있는 소스인데 유용하게 잘사용 하겠습니다.^^
불여우 에서도 완벽하게 호환이 되네요. -
골똘이
2005.09.27 14:00
왜 저는 안되는 건지..
조금더 상세히 설명해 주실순 없나요...
제 블로그에 적용해 볼려고 하는데.. 안되네요.. ㅜ.ㅜ;;
링크된 페이지는 불려져오는데 화면에 아무것도 표시안됩니다. -
짱가
2005.10.25 12:19
이 소스를 이용해서 아이프레임에 게시판을 넣으면 노프레임 홈처럼 만들수 있을까요? -
권윤호
2005.10.29 23:12
아이디를 2개이상 쓰려면 구분자는 뭘써야 하나요? -
손영식
2006.05.30 01:55
그래도 안되시는 분들은 이것 써보세요 ^^
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>프레임셋을 이용한 아이프레임 효과</title>
</head>
<frameset rows="100%">
<frame src=http://>
<noframes>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
</body>
</noframes>
</frameset>
</html> -
푸른나무
2006.10.11 11:26
쓰글 ㅠ.ㅠ 언제나 봐도 소스연결 크기조정이 까다로운 아이프레임;;;;(일단개인적이므로 ㅋㅋ) -
정인
2008.01.03 11:16
와! 저도 잘 되는군요. 너무 감사해요 ^^ -
ㄷㄱ
2008.01.24 15:03
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>프레임셋을 이용한 아이프레임 효과</title>
</head>
<frameset rows="100%">
<frame src=http://>
<noframes>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
</body>
</noframes>
</frameset>
</html> -
쭌~나
2008.10.14 16:25
전 이렇게 ㅡㅡ
<iframe name="ifrm_name" frameborder="0" width="100%" height="100%" src="pagename" onLoad="this.style.height=ifrm_name.document.body.scrollHeight"></iframe>
