웹마스터 팁

  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>

이런식으로요..

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


참, 활용방법은... 게시판 같은 걸 아이프레임 내부에 띄우고 싶을때.. (아님 어쩔 수 없이 띄워야 할때...) 게시물의 길이에 따라 가변적으로 아이프레임의 크기를 조절해서 마치 노프레임 홈피 처럼 보이게 하는 역할을 할 수 있겠네요... 그 외에도 몇 가지 있겠지만...
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
아이콘 폰트 축소 서비스 easylogic 2016.08.11
메인메뉴 빵조각메뉴 서로 다르게 하고 싶을때 file 미연조 2016.07.08
하나의 웹서버에 php5, php7 설치하기 라온넷닷컴 2016.06.10
비싼호스팅 쓰지말고 공유기로 돌리자(컴보다 더 쉽다니!!) [1] djdisodo 2016.06.04
CentOs7에서 중국 IP 차단하기 [5] file 카르마 2016.06.02
사용자정의 기준으로 정렬을 했을 경우 최신글이 목록 상단으로 뜨도록 수정법 ( 현재 최신글이 하단에 뜸 ) sejin7940 2016.05.25
[시니시즘] XE의 XML Query 관련 팁 시니시즘 2016.04.26
[개발팁] Console에서 디버깅 시 발생하는 x.js Deprecated 오류 제거 하기 SimpleCode 2016.04.19
IIS에서 HTTPS를 사용하기 위한 SSL설정 (letsencrypt 인증서 설치, 갱신) file ehii 2016.04.13
SEO 1.8.18 에서 Analytics 와 기타 탭 작동 안 하는 버그 수정법 sejin7940 2016.04.03
게시판이 있는데 관리자 페이지에 나타나지 않을 경우 해결 방법 퍼니엑스이 2016.03.20
고정도메인 host 변경하기 해피정닷컴 2016.03.11
CSS + HTML 메뉴 마루디자인 2016.03.10
호스팅 변경이나 이전시 썸네일 문제 점검사항 맥노턴 2016.03.07
[속도 향상] 불필요한 애드온 끄기 다미아빠 2016.03.06
서버의 파일권한 맞추기. 마루디자인 2016.03.01
외부 페이지에서 XE 기능을 추가 할때 410contents 2016.02.25
PHP7에서 XE설치시 텍스트 다 깨져서 나올 때 꼬부기 2016.02.23
CentOS 6.x 에서 OpenSSL Heartbleed 취약점 업데이트 마루디자인 2016.02.23
OpenSSL 웹에 직접 구축하기 [2] file 워리도꾸 2016.02.16
태그 쓰기