웹마스터 팁

  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>

이런식으로요..

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


참, 활용방법은... 게시판 같은 걸 아이프레임 내부에 띄우고 싶을때.. (아님 어쩔 수 없이 띄워야 할때...) 게시물의 길이에 따라 가변적으로 아이프레임의 크기를 조절해서 마치 노프레임 홈피 처럼 보이게 하는 역할을 할 수 있겠네요... 그 외에도 몇 가지 있겠지만...
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
인천오피 ⦑오피.CLUB⦒ 인천마사지 인천오피 인천오피 인천OP koykoyah 2025.02.20
대전오피 대전오피 ⦑오피쓰주소.COM⦒ 대전OP 대전스파 대전오피 koykoyah 2025.02.20
해운대오피 해운대출장안마 ⦑출장안마사이트.COM⦒ 해운대OP 해운대오피 해운대오피 koykoyah 2025.02.20
강동오피 ⦑출장안마사이트.COM⦒ 강동마사지 강동오피 강동오피 강동OP koykoyah 2025.02.20
세종오피 ⦑오피쓰주소.COM⦒ 세종OP 세종오피 세종출장샵 세종오피 koykoyah 2025.02.20
답십리오피 ⦑오피쓰주소.COM⦒ 답십리마사지 답십리오피 답십리오피 답십리OP koykoyah 2025.02.20
세종오피 세종OP ⦑오피쓰.COM⦒ 세종휴게텔 세종오피 세종오피 koykoyah 2025.02.20
포항오피 ⦑오피쓰주소.COM⦒ 포항오피 포항OP 포항건마 포항오피 koykoyah 2025.02.20
평촌오피 ⦑오피쓰주소.COM⦒ 평촌오피 평촌OP 평촌건마 평촌오피 koykoyah 2025.02.20
부산오피 ⦑오피쓰.COM⦒ 부산오피 부산출장마사지 부산오피 부산OP koykoyah 2025.02.20
강남오피 강남OP ⦑오피사이트.NET⦒ 강남휴게텔 강남오피 강남오피 koykoyah 2025.02.20
홍대오피 ⦑출장마사지안내.COM⦒ 홍대마사지 홍대오피 홍대오피 홍대OP koykoyah 2025.02.20
송탄오피 ⦑오피사이트.NET⦒ 송탄오피 송탄OP 송탄건마 송탄오피 koykoyah 2025.02.20
동탄오피 ⦑오피.CLUB⦒ 동탄마사지 동탄오피 동탄오피 동탄OP koykoyah 2025.02.20
평촌오피 ⦑출장안마사이트.COM⦒ 평촌마사지 평촌오피 평촌오피 평촌OP koykoyah 2025.02.20
창원오피 ⦑오피쓰주소.COM⦒ 창원마사지 창원오피 창원오피 창원OP koykoyah 2025.02.20
대구오피 ⦑출장마사지안내.COM⦒ 대구마사지 대구오피 대구오피 대구OP koykoyah 2025.02.20
동대문오피 동대문출장안마 ⦑오피쓰주소.COM⦒ 동대문OP 동대문오피 동대문오피 koykoyah 2025.02.20
제주오피 ⦑출장마사지안내.COM⦒ 제주마사지 제주오피 제주오피 제주OP koykoyah 2025.02.20
강남오피 강남출장안마 ⦑오피.CLUB⦒ 강남OP 강남오피 강남오피 koykoyah 2025.02.20
태그 쓰기