웹마스터 팁

  2. Support
  3. 웹마스터 팁

제로보드 사용시 아이프레임의 크기를 내용에 따라 바꿔주는 스크립트

2003.06.28 10:45

쿨리안

바로 밑에 있는 것과 같은 용도로 쓰이는 아이프레임의 크기를 바꿔주는 소스입니다.
원저자는 민이님이고..제가 제로보드에 이용하기 위한 보충설명을 넣었습니다. 원래소스와 출처는 맨 밑에 달았습니다.

=====================================================================

아이프레임에 제로보드를 넣을 경우 글의 내용에 따라
프레임의 크기를 자동적으로 변화시켜주고 싶을 때가 있습니다.
그 때의 절차는 다음과 같습니다.

1. 아이프레임 문서를 작성한다... 이 때 id="iframe_main" 를 넣어준다.
  예를 들어 다음과 같습니다.

<iframe id="iframe_main" src="test.html" width=10 height=10 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>

과 같이 됩니다. test.html자리에 게시판 주소가 들어가겠지요..


2. 제로보드 관리자 화면의 해당 게시판 설정에서... [게시판 상단에 출력할 내용]

<div align=center> 가 있죠?

<div align=center id="page_content" style="position:absolute;left:0;top:0;width:100%">
으로 바꾸어 줍니다.


3. [게시판 하단에 출력할 내용] 의 </div> 아래에 다음과 같은 스크립트를 넣어 줍니다.


-------요기 아래 부터 ----------------------------------------

<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>

-------요기 위 까지 ----------------------------------------
끝
========================================================================





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

개발자 : 민이
http://www.heemin.com
http://www.heemin.com/minie/iframe_test.html

예전부터 꼭 알고 싶던 스크립트인데,

결국 만들어 버렸네요 ^^;;

참고로 아이프레임을 활용하기 위한 여러 소스들에서 발췌해 이리저리 조립한 소스입니다. (완전 창작이 아니라는 뜻이지요)

우선, 예제는 아래에서 볼 수 있습니다.

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>

이런식으로요..

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


참, 활용방법은... 게시판 같은 걸 아이프레임 내부에 띄우고 싶을때.. (아님 어쩔 수 없이 띄워야 할때...) 게시물의 길이에 따라 가변적으로 아이프레임의 크기를 조절해서 마치 노프레임 홈피 처럼 보이게 하는 역할을 할 수 있겠네요... 그 외에도 몇 가지 있겠지만...
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
제로보드에서 iframe 높이 자동(유동적)조절(파폭,IE, 오페라,사파리,IETester) [11] file hhgyu 2010.09.17
제로보드 사용시 아이프레임의 크기를 내용에 따라 바꿔주는 스크립트 [7] 쿨리안 2003.06.28
윈도우 서버 2012 에서 제로보드XE 설치부터 사용하기. [16] file 부롱이 2013.03.29
사이트접속시 제로보드XE폴더로 이동되게 하는 쉬운방법 [8] 부찬™ 2007.08.17
제로보드4에서 xe로 이전시 갤러리 게시판 이미지 깨어지는 현상 해결방법 [2] 최르토스 2012.04.22
제로보드 DTREE 메뉴 적용하기 ( 카테고리 선택기 흉내 냈습니다.) [5] file 조성우371 2009.01.17
블루호스트(Bluehost)에서 XE 제로보드 및 텍스타일 블로그 서브도메인에 설치하기 [4] file TELSTER 2011.03.25
최신 제로보드 XE 동영상 강의 [25] 하얀마법 2013.08.09
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기 [27] file @kihwa 2003.07.26
제로보드 4 -> xe 신버전으로 마이그레이션 경험담 [4] file 윤안젤로 2013.02.28
제로보드 xe 게시판 가로 푹 줄이기 방법좀 알려주세요. [1] 산업일꾼 2013.04.14
제로보드에 관하여.. [3] 검정고내 2013.01.07
제로보드 XE에서 파비콘(favicon) 만들기 [8] file tindrum 2008.05.26
제로보드XE 1.4 -> 1.5 초간단 업그레이드 [10] 행복돌이 2012.05.15
제로보드 1.5 이상 게시판에 페이스북 댓글 플러그인 설치법 [1] 줄루™ 2012.03.05
제로보드4 에서 xe 1.5 버전설치후 xml 파일 이전시 파일 누락되는 현상해결 [4] 때린데 또때려 2012.03.24
제로보드4에서 XE로 넘어와 헤메는 분들을 위해서(1편)-Xe개념이해와 설치 [16] file 황비 2010.03.18
제로보드4에서 XE로 넘어와 헤메는 분들을 위해서(3편:최종)-Widgets이해와 활용 [24] 황비 2010.03.26
[마지막팁] 제로보드4 처럼 레이아웃 없이 XE로 나만의 홈페이지 만들기 [6] Gekkou 2010.03.08
제로보드 xe 쇼핑몰 오늘본 상품 퀵메뉴 만드는 법 알려주세요 유유히 2011.12.15
태그 쓰기