웹마스터 팁

  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>

이런식으로요..

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


참, 활용방법은... 게시판 같은 걸 아이프레임 내부에 띄우고 싶을때.. (아님 어쩔 수 없이 띄워야 할때...) 게시물의 길이에 따라 가변적으로 아이프레임의 크기를 조절해서 마치 노프레임 홈피 처럼 보이게 하는 역할을 할 수 있겠네요... 그 외에도 몇 가지 있겠지만...
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
OpenSSL 웹에 직접 구축하기 [2] file 워리도꾸 2016.02.16
스케치북 갤러리 제목에 카테고리 추가하기. [1] 보보2 2017.07.17
XE 공식(?) 버튼 삽입하기 [다들 알지도 모르겠네요,,] [77] [1] 웹엔진 2011.02.28
글등록시 포인트차감으로 등록불가 설정시 개별설정이 아닌 전체 설정 기준으로만 사용할 경우는 적용 안 되는 버그 수정법 sejin7940 2017.08.23
폰갭 자기 전화번호 추출 한꼬마 2017.08.14
폰갭 버전 업데이트 후 push 안되시는 분들께.. 한꼬마 2017.08.09
포인트 적립 횟수 일별 제한하기 (게시글 및 댓글 작성시) Redback 2017.06.18
다음 우편번호 5자리 적용 [1] file 뒤늦게입문 2017.03.15
HTML, CSS 등 코드를 깔끔하게 정렬 [6] file 참치.k 2013.01.11
SASS? CSS확장판 키큰아이 2017.05.09
사용자정의에서 URL형, email형, textarea 형등에서도 기본값 인식하게 하려면 sejin7940 2017.04.25
비밀글에 대해서도 썸네일이미지는 출력되도록 하고 싶으면 sejin7940 2017.04.12
제로보드 사용시 아이프레임의 크기를 내용에 따라 바꿔주는 스크립트 [7] 쿨리안 2003.06.28
게시글 확장변수 순으로 정렬하기 (2010.01.18 13:18 수정) [24] June Oh 2010.01.11
인기글 [1] kdp 2015.05.07
[주옥시리즈]최신글,인기글 위젯에 댓글수 표기하기 [1] socialskyo 2013.10.01
.htaccess 파일 관련 팁(웹 사이트 퍼포먼스 향상 및 트래픽 절감 효과) [21] file 서시빈목 2013.10.22
압축 풀어 설치했던 XE를 git으로 변환하기 [6] 기진곰 2015.02.25
반응형 기본 개념 Ansi™ 2017.02.27
[도로명주소 krzip] 1.7.4 이전 버전들에 이용하기 [3] XE플스 2014.02.06
태그 쓰기