웹마스터 팁

  2. Support
  3. 웹마스터 팁

아이프레임을 내용에 따라 크기(폭,높이) 바꿔주는 스크립트

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>

이런식으로요..

그럼 이만... 유용하게 쓰시길 바랍니다.


참, 활용방법은... 게시판 같은 걸 아이프레임 내부에 띄우고 싶을때.. (아님 어쩔 수 없이 띄워야 할때...) 게시물의 길이에 따라 가변적으로 아이프레임의 크기를 조절해서 마치 노프레임 홈피 처럼 보이게 하는 역할을 할 수 있겠네요... 그 외에도 몇 가지 있겠지만...

그럼 안녕히 계세요~

이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
[초보강좌] 윈도우 서버의 용량 제한~~!! [17] file HoYa™ 2004.01.08
procmail로 마이둠 웜(MyDoom Worm) 필터링 좋은진호 2004.02.04
[XAMPP]한 컴퓨터에서 여러 개의 홈페이지 운영하는 방법(가상호스트 아님) [8] The Darkness 2004.02.05
Windows XP 에서 Apache 2 + PHP 5 + SQLite 설치하기 [8] 엔젤퀸 2004.02.23
Serv-U의 보안 설정 [1] 87K300 2004.02.24
apache,php,mysql,zendoptimizer,phpmyadmin 다운 받기 [5] 이성헌 2004.02.28
xampp 1.3 설치해 보기(winxp) [3] 이주성 2004.03.03
-초보의 초보대상 강좌-커널 패치하기... [2] 87K300 2004.03.19
Apache 자체 Log 관리 87K300 2004.03.20
경량화 리눅스 'Linux Annyung' [5] u2em 2004.03.27
초보자를 위한 Windows용 Apache2 + PHP + MySQL 설치 [7] PCLab 2004.03.29
Apache 보안 [4] u2em 2004.04.05
개인서버로 메일 서버 및 기타 서버를 운영할 때 메일 및 서비스 절대 못 하게 하기...(xp이상) [3] 그냥이렇게。 2004.04.20
[경보]Serv-U 4.0 이전 버전 크래킹 툴 발견 [4] u2em 2004.04.26
FTP서버설치 (filezilla server) [6] 이주성 2004.05.20
Apache 서버운영에 쓸모있는 팁 몇가지 [2] PCLab 2004.05.21
Apache 서비스를 위한 NT 보안 설정 [2] 토토루 2004.05.24
IIS6.0+PHP4.3.3+MySql4.0.18+제로보드4.1 pl4 [10] 류진곤 2004.06.08
[펌]유동아이피->고정아이피(포워딩 아님!!) [12] Plus가좋다 2004.06.08
웹호스팅 사용자를 위한 계정관리 스크립트 [5] 알지로넷 2004.06.25
태그 쓰기