웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
아이프레임을 내용에 따라 크기(폭,높이) 바꿔주는 스크립트
2002.08.01 14:41
예전부터 꼭 알고 싶던 스크립트인데,
결국 만들어 버렸네요 ^^;;
참고로 아이프레임을 활용하기 위한 여러 소스들에서 발췌해 이리저리 조립한 소스입니다. (완전 창작이 아니라는 뜻이지요)
우선, 예제는 아래에서 볼 수 있습니다.
http://www.heemin.com/minie/iframe_test.html
-------------------------------------------------------------------------
소스를 볼까요.
일단, iframe_test.html 를 볼까요.
<iframe id="iframe_main" src="test.html" width=10 height=10 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>
이 한 줄이 다입니다. 보면 아시겠지만, 아이프레임의 크기를 10x10으로 잡았습니다. test.html을 부르고 있구요.
test.html 입니다.
<html>
<head>
<meta http-equiv="Content-Language" content="ko">
<meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987">
<title>아이프레임</title>
</head>
<body>
<!------ 각 페이지의 body 다음에 다음을 반드시 넣어야 합니다 ----------------->
<div id="page_content" style="position:absolute;left:0;top:0;width:100%">
<!---------------------------------------------------------------------------->
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="300" bgcolor="#C0C0C0" height="600">
<tr>
<td width="100%" align="center"><b><font size="2">이 부분이 아이프레임의 내용입니다<br>
(바깥쪽 까만 라인까지 포함)</font></b><p><font size="2"><b>Iframe_reset()</b></font></p>
<p><font size="2"><b>제작 : 노경민<br>
E-mail : <a href="mailto:irismin@heemin.com">irismin@heemin.com</a><br>
제작일 : 2002.8.1</font></b></td>
</tr>
</table>
</div>
<!---------------- 이 부분을 해당 페이지의 body 안에 넣습니다 --------------->
<script language="JavaScript1.2">
function iframe_reset(){
dataobj=document.all? document.all.page_content : document.getElementById("page_content")
dataobj.style.top=0
dataobj.style.left=0
pagelength=dataobj.offsetHeight
pagewidth=dataobj.offsetWidth
parent.document.all.iframe_main.height=pagelength
parent.document.all.iframe_main.width=pagewidth
}
window.onload=iframe_reset
</script>
<!------------------------------------------------------------------------>
</body>
</html>
보시면 대강 이해가 가능하실거에요.
일단, 아이프레임을 현 페이지의 크기에 맞게 리사이징 하기를 원하는 페이지에는 반드시 <div id="page_content" style="position:absolute;left:0;top:0;width:100%"> 이 부분과, 아래에 이쓴 스크립트가 들어가 있어야 합니다.
<div> 태그는 해당 페이지의 최초 부분부터 최후 부분까지를 감싸줘야 합니다.
<body>
<div id="page_content" style="position:absolute;left:0;top:0;width:100%">
페이지 내용
</div>
스크립트는 이쯤에...넣고..
</body>
이런식으로요..
그럼 이만... 유용하게 쓰시길 바랍니다.
참, 활용방법은... 게시판 같은 걸 아이프레임 내부에 띄우고 싶을때.. (아님 어쩔 수 없이 띄워야 할때...) 게시물의 길이에 따라 가변적으로 아이프레임의 크기를 조절해서 마치 노프레임 홈피 처럼 보이게 하는 역할을 할 수 있겠네요... 그 외에도 몇 가지 있겠지만...
그럼 안녕히 계세요~
결국 만들어 버렸네요 ^^;;
참고로 아이프레임을 활용하기 위한 여러 소스들에서 발췌해 이리저리 조립한 소스입니다. (완전 창작이 아니라는 뜻이지요)
우선, 예제는 아래에서 볼 수 있습니다.
http://www.heemin.com/minie/iframe_test.html
-------------------------------------------------------------------------
소스를 볼까요.
일단, iframe_test.html 를 볼까요.
<iframe id="iframe_main" src="test.html" width=10 height=10 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>
이 한 줄이 다입니다. 보면 아시겠지만, 아이프레임의 크기를 10x10으로 잡았습니다. test.html을 부르고 있구요.
test.html 입니다.
<html>
<head>
<meta http-equiv="Content-Language" content="ko">
<meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987">
<title>아이프레임</title>
</head>
<body>
<!------ 각 페이지의 body 다음에 다음을 반드시 넣어야 합니다 ----------------->
<div id="page_content" style="position:absolute;left:0;top:0;width:100%">
<!---------------------------------------------------------------------------->
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="300" bgcolor="#C0C0C0" height="600">
<tr>
<td width="100%" align="center"><b><font size="2">이 부분이 아이프레임의 내용입니다<br>
(바깥쪽 까만 라인까지 포함)</font></b><p><font size="2"><b>Iframe_reset()</b></font></p>
<p><font size="2"><b>제작 : 노경민<br>
E-mail : <a href="mailto:irismin@heemin.com">irismin@heemin.com</a><br>
제작일 : 2002.8.1</font></b></td>
</tr>
</table>
</div>
<!---------------- 이 부분을 해당 페이지의 body 안에 넣습니다 --------------->
<script language="JavaScript1.2">
function iframe_reset(){
dataobj=document.all? document.all.page_content : document.getElementById("page_content")
dataobj.style.top=0
dataobj.style.left=0
pagelength=dataobj.offsetHeight
pagewidth=dataobj.offsetWidth
parent.document.all.iframe_main.height=pagelength
parent.document.all.iframe_main.width=pagewidth
}
window.onload=iframe_reset
</script>
<!------------------------------------------------------------------------>
</body>
</html>
보시면 대강 이해가 가능하실거에요.
일단, 아이프레임을 현 페이지의 크기에 맞게 리사이징 하기를 원하는 페이지에는 반드시 <div id="page_content" style="position:absolute;left:0;top:0;width:100%"> 이 부분과, 아래에 이쓴 스크립트가 들어가 있어야 합니다.
<div> 태그는 해당 페이지의 최초 부분부터 최후 부분까지를 감싸줘야 합니다.
<body>
<div id="page_content" style="position:absolute;left:0;top:0;width:100%">
페이지 내용
</div>
스크립트는 이쯤에...넣고..
</body>
이런식으로요..
그럼 이만... 유용하게 쓰시길 바랍니다.
참, 활용방법은... 게시판 같은 걸 아이프레임 내부에 띄우고 싶을때.. (아님 어쩔 수 없이 띄워야 할때...) 게시물의 길이에 따라 가변적으로 아이프레임의 크기를 조절해서 마치 노프레임 홈피 처럼 보이게 하는 역할을 할 수 있겠네요... 그 외에도 몇 가지 있겠지만...
그럼 안녕히 계세요~
댓글 9
제목 | 글쓴이 | 날짜 |
---|---|---|
도깨비불을 아시나요 [5] | 세벌사랑 | 2002.07.30 |
^^ 공포의 숫자맞추기 ^^ [17] | BULGOM | 2002.07.30 |
[Siren]타이틀 글씨가 움직인다! (상태바아님) [4] | 세이렌 | 2002.07.31 |
아이프레임을 내용에 따라 크기(폭,높이) 바꿔주는 스크립트
[9]
![]() | 민이 | 2002.08.01 |
링크에 포커스 없애기 II [6] | steelheart | 2002.08.02 |
iFrame 문서크기에 맞게.. 초간단.. [10] | 정명주 | 2002.08.02 |
ZipShin이 사용하는 한링크에 두프레임 움직이기..^^ [14] | ZipShin | 2002.08.03 |
허접 자바 스크립트 -1- [6] | 홍윤식 | 2002.07.27 |
허접 자바 스크립트 강의 - 2 - [13] | 홍윤식 | 2002.07.29 |
허접 자바스크립트 강의 - 3 - [6] | 홍윤식 | 2002.07.31 |
개판 오분전 칼라팔레트
[5]
![]() | 미친개 | 2002.08.08 |
허접 자바스크립트강의 - 4 - [8] | 홍윤식 | 2002.08.10 |
요일마다 지정된 태그 나타나게 하기
[1]
![]() | Eccen | 2002.08.13 |
랜덤으로 배경음악 지정하기. [5] | ZipShin | 2002.08.13 |
랜덤으로 바뀌는 배경이미지 [11] | ZipShin | 2002.08.13 |
[로그인] 자바스크립트로 여러개 로그인하기 [10] | ZipShin | 2002.08.13 |
개판 오분전 브레인 써바이벌 [19] | 미친개 | 2002.08.14 |
★랜덤으로 음악 재생하기★ [23] | 뽀유♡ | 2002.08.16 |
NZEO의 좌측 이동메뉴를 구현해 보자. (이동 On/Off 기능 포함) [43] | steelheart | 2002.08.20 |
원하는 위치에서 스크롤바를 부드럽게 따라다님 [10] | ▩윤미 | 2002.08.20 |