웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
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>
제목 | 글쓴이 | 날짜 |
---|---|---|
iframe 그때그때 달라요 ~ [높이자동변경] [15] | kim's | 2005.02.18 |
[기초]홈페이지의 프레임 나누기 입니다. [5] | piasol | 2004.12.10 |
브라우저 주소창에 긴 경로 안 나타나게 하기 [7] | 편입성공기 | 2004.12.06 |
도메인 포워딩 즉 페이지 자동이동하기 [6] | 편입성공기 | 2004.12.06 |
페이지 회색스크롤바로 바꾸기 | 편입성공기 | 2004.12.06 |
톡톡 튀는 홈페이지 테이블 제작하기 ^^ [6] | piasol | 2004.12.03 |
최근게시물의 폰트크기와 링크색상 바꾸는 방법 | LUFFY | 2004.11.20 |
웹폰트사용에 대한 실체를 밝힌다!! [22] | Multi_Taeji | 2004.11.13 |
웹문서 검색을 대비한 헤더,푸터 나누기. [4] | 그럴까? | 2004.10.29 |
W3C 표준 권고안. 앞으로 꼭 지켜주세요.. [14] | canelia | 2004.10.29 |
해상도에 적응하는 노프레임 홈페이지 제작에 필요한 표와 셀의 관계 [8] | Multi_Taeji | 2004.10.13 |
테이블 주위에 점선효과!!!~~(초간단팁!) [6] | 초라 | 2004.09.25 |
경고창 없이 부모창 닫고 아기창에서 마우스 오른버튼 클릭시 아기창도 닫는다. [4] | 詩와언어™ | 2004.08.27 |
relative 속성 레이어를 이용한 메뉴를 자리차지하지 않게... [1] | PHASE | 2004.06.03 |
플래시 swf파일 배경 투명하게 하기 ~~~ [8] | kim's | 2004.05.09 |
허접 팁....레이어로 플래시 뺨치는 홈페이지 만들기 -추가- [17] | 남규성 | 2004.05.05 |
자동 스크롤 메뉴 (끄기 기능, 무한 스크롤 X) [6] | ☺심심 | 2004.05.02 |
홈페이지 빠르게하는 [로딩속도를 높히는 10가지방법] [20] | kim's | 2004.04.29 |
[tip]간단한 반투명 필터 적용법 [2] | 드래군 | 2004.04.21 |
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] | CoolUnit | 2004.03.01 |