웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
톡톡 튀는 홈페이지 테이블 제작하기 ^^ [6] | piasol | 2004.12.03 |
페이지 회색스크롤바로 바꾸기 | 편입성공기 | 2004.12.06 |
도메인 포워딩 즉 페이지 자동이동하기 [6] | 편입성공기 | 2004.12.06 |
새창에 폼태그로 전송하기 | 편입성공기 | 2004.12.06 |
브라우저 주소창에 긴 경로 안 나타나게 하기 [7] | 편입성공기 | 2004.12.06 |
드래그 금지 및 오른쪽 버튼 금지 소스 [6] | 편입성공기 | 2004.12.06 |
[기초]홈페이지의 프레임 나누기 입니다. [5] | piasol | 2004.12.10 |
XHTML 1.0 Strict에서 더 이상 사용할 수 없는 태그 / 속성 [16] | EDENe | 2005.01.22 |
XHTML 1.0 팁 [8] | EDENe | 2005.01.22 |
포토샵없이 이미지에 멋진 효과 내기 # [5] | Kasis | 2005.02.04 |
문서 출입시 여러가지효과나타내기(메타태그) [1] | HYESOO | 2005.02.11 |
TAG로 이미지테두리 만들기 [3] | 하나둘 | 2005.02.12 |
iframe 그때그때 달라요 ~ [높이자동변경] [15] | kim's | 2005.02.18 |
스킨작업에 중요하게 쓰이는 것들
[2]
![]() | ProSense™ | 2005.04.12 |
textarea 속에 내용넣기 (마우스클릭시 사라짐) [5] | 우연 | 2005.04.16 |
필터 효과들
[1]
![]() | keymove | 2005.07.08 |
효율적인 폰트 속성 지정 [4] | 대류 | 2005.08.10 |
색상값의 속성 [2] | 대류 | 2005.08.10 |
Rain# 위로 흐르는글 만들기 | Rain | 2005.08.14 |
배경을 가로 또는 세로로 반복하여 보여주는 기능. [1] | 꼬냐닷컴 | 2005.09.19 |