웹마스터 팁
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
-
프레
2002.08.01 17:20
-
ziny
2002.08.02 03:37
와; 진짜 유용하네요..^^ 감사합니다. -
ziny
2002.08.02 03:41
아이프레임 타겟효과랑 합쳐서 쓰면 최강이 될듯-_-v -
민이
2002.08.02 10:18
감사합니다. ^^;; www.phpschool.com 에 가보시면 TIP&TECH 란에 조금 다른 방식의 같은 효과를 내는 TIP이 올라왔습니다. (제가 한 게 아니구 다른 분이..)
제 것은 뭐랄까.. 초보티 팍팍 나는 교과서형이구요...
phpschool.com 에 올라온 다른 팁은 재미난 방식인 것 같아요..
확인해 보세요. 둘 중 어느것을 쓰건 언제나 홈피 즐겁게 만드세요~~ -
이흥현
2002.08.02 11:38
우와~ 진짜로 감사합니다~
항상 노프레임 홈페이지 만들때 위아래 HTML코드 삽입했는데..
이것만 있으면 해결 되겠네요^^ -
남중선
2002.08.03 09:50
저는 iframe의 src에서 제로보드를 불러오려고 했는데, 위의 소스는 제로보드의 게시판 설정에 넣기에는 좀 곤란하더군요. 그래서 말씀하신 것처럼 phpschool의 것을 사용했습니다.
양쪽 모두 훌륭한, 꼭 필요한 팁인것 같습니다. 수고하셨습니다. -
조상현
2003.07.29 17:49
정말 필요한 팁이네요.. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
전 노프레임 시러라해서 ㅡ_ㅡ ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
근데 정말 만드신듯.. 근데 게시판셋팅이랑 너무 힘드네요..
그냥 간단하게 만들어볼순없는디 ㅋㅋㅋㅋㅋ 수고요 -
조상현
2003.07.29 17:49
아무튼 2시간동안 눈빠져라 보구 성공 ㅎ -
sunny
2003.08.09 02:52
이거 찾느라 엄청 헤맸는데 몇 번의 시도 끝에 원하는 결과를 얻었어요-
포기할려구 했는데, 감사합니다 ^^ 추천~꾹!
제목 | 글쓴이 | 날짜 |
---|---|---|
네임서버 설정 [15] | 쇠물택 | 2002.02.24 |
아파치 가상 유저 설정하기 [6] | i- | 2002.02.24 |
전자우편만 사용할수 있는 계정추가하기 [1] | pai | 2002.02.25 |
리눅스서버 : 도메인 가진 사용자 추가하기 (텔넷,FTP,이메일 사용) [5] | pai | 2002.02.27 |
근사모의 APM_steup3설치 법 [5] | 뽀유★ | 2002.03.01 |
아래 pai님 도메인셋팅 강좌 세부파일들 예제 :) [3] | 아르체 | 2002.03.06 |
리눅스 아주 간단한 사용자 계정 주기-_- [7] | i- | 2002.03.12 |
MySQL 사용자 계정주기 [10] | pai | 2002.03.12 |
[mysql을 하자 1] mysql 종료와 재부팅 | 비바람 | 2002.03.13 |
[mysql을 하자 2] (pai님도 하신^^)사용자와 db를 맹글자 [4] | 비바람 | 2002.03.13 |
[mysql을 하자 3] DB서버 원격 사용자,DB 만들어 사용하기 [5] | 비바람 | 2002.03.13 |
Apache2.0.35 + php4.3.0-devel 설치하기;; [15] | Cksoft | 2002.04.08 |
DB 디자인 툴 소개 [2] | 석이 | 2002.04.21 |
개인서버구동시 서버커널 메모리로....(렉생기시는분들 강추) [2] | 홈1004 | 2002.05.03 |
Redhat7.2에서 apache,mysql,php,zend,gd,freetype,giflib,jpeglib,zlib 설치하기 [14] | DeX™ | 2002.05.04 |
[알아서 나쁠것없는 10원짜리 팁!] 수십 수백명사용자의 일괄생성 방법! [6] | 임현 | 2002.05.09 |
Redhat 7.3 나왔습니다. [20] | 야쿠자 | 2002.05.10 |
텔넷에서 다른 계정사용자의 홈디렉토리 접근 막기 [4] | 김영남 | 2002.05.11 |
웹호스팅 서버세팅 쉽게하기 팁[윈도우 메모장 이용] [3] | 김영남 | 2002.05.14 |
가상호스트 i- 님의 강의에 덧붙여서 | 이종렬 | 2002.05.24 |
감사합니다.