웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
제로보드 사용시 아이프레임의 크기를 내용에 따라 바꿔주는 스크립트
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>
이런식으로요..
그럼 이만... 유용하게 쓰시길 바랍니다.
참, 활용방법은... 게시판 같은 걸 아이프레임 내부에 띄우고 싶을때.. (아님 어쩔 수 없이 띄워야 할때...) 게시물의 길이에 따라 가변적으로 아이프레임의 크기를 조절해서 마치 노프레임 홈피 처럼 보이게 하는 역할을 할 수 있겠네요... 그 외에도 몇 가지 있겠지만...
원저자는 민이님이고..제가 제로보드에 이용하기 위한 보충설명을 넣었습니다. 원래소스와 출처는 맨 밑에 달았습니다.
=====================================================================
아이프레임에 제로보드를 넣을 경우 글의 내용에 따라
프레임의 크기를 자동적으로 변화시켜주고 싶을 때가 있습니다.
그 때의 절차는 다음과 같습니다.
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>
이런식으로요..
그럼 이만... 유용하게 쓰시길 바랍니다.
참, 활용방법은... 게시판 같은 걸 아이프레임 내부에 띄우고 싶을때.. (아님 어쩔 수 없이 띄워야 할때...) 게시물의 길이에 따라 가변적으로 아이프레임의 크기를 조절해서 마치 노프레임 홈피 처럼 보이게 하는 역할을 할 수 있겠네요... 그 외에도 몇 가지 있겠지만...
댓글 7
-
세죠위그이
2003.06.28 15:10
음, 좋은 팁입니다~ -
조원석
2003.06.30 18:59
오오...그렇군요...정말 감사드려요..^^ -
love_Inhee
2003.11.12 17:12
저는 안되는데요 왜그런지...아이프레임 사이즈를 10*10으로 주니 그만하게 나와서 사이트를 줘봤더니 그 사이즈에서 변동이 없네요
소스는 똑같은데 뭐가 잘못된건지..헐.... -
AimJin
2017.03.19 23:19
설명하신 그대로 다시해보세요.
똑같이 하니간 잘 되더라고요~^^
-
love_Inhee
2003.11.12 17:34
같은계정이 안되면 안되는군요.....다른계정에 있는 걸 쓰면 어떻게 해야되는지... -
AimJin
2017.03.19 23:18
대박대박 좋은자료 너무 감사합니다!!^^
너무 많은 도움이 되었어요~^^
-
디트리히A
2017.04.12 15:19
크로스도메인 보안정책이라고 해서 같은 도메인이나 서버나 아이피가 아니면 안됩니다.
상대방 서버 설정이 풀려져있으면 상관없긴 합니다만.
제목 | 글쓴이 | 날짜 |
---|---|---|
메뉴와 연결된 xe의 page에 iframe을 사용해서 제로보드4 게시판을 불러들였습니다 [2] | 바람처럼.. | 2007.09.14 |
2차,3차 메뉴가 좌측으로 일렬로 되어있어 구분이 잘 안됩니다,이럴 때~ [7] | *제트* | 2007.09.16 |
요청하신 모듈을 찾을 수 없습니다 문제해결 방법 [11] | 써니a | 2007.09.17 |
winxp IE7 rwapm에서 한글이름파일 업로드 [12] | 공수래 | 2007.09.17 |
게시물 읽을 때 하단에 목록 보이지 않게 하기 [3] | 정은기 | 2007.09.17 |
제로보드 XE에서 강추하는 플래시 넣기 [12] | 미오유 | 2007.09.19 |
정사각형 썸네일은 안녕~ 직사각형 썸네일을 만들어보자 [8] | 매니안 | 2007.09.19 |
새 공지창 띄우기 [22] | *제트* | 2007.09.20 |
(포인트 모듈) 추가 정보 출력 [8] | Simulz | 2007.09.20 |
공지창 소스 [2] | 열린 공간 | 2007.09.21 |
<수정>사이트 메신저 회원 연동해서 사용하기.... [3] | 녀석참 | 2007.09.22 |
제로보드 XE 설치후에 제대로 작동 안하는 원인은... | 독도2005 | 2007.09.22 |
(모듈 설정) 모듈 목록을 추가하여 설정을 쉽고 빠르게 #2, 2007-09-28 [3] | Simulz | 2007.09.23 |
로고에 플래시파일 사용하기 [2] | 팔공산 | 2007.09.26 |
(보드 모듈) 글 목록을 조회수 별로 색상 지정하기 [15] | Simulz | 2007.09.27 |
회원가입 약관 관련. [2] | rickey | 2007.09.28 |
페이지에 설문 조사 넣기 [2] | 지허 | 2007.10.01 |
다중의 이종 웹 브라우저에서 웹 사이트 테스트하기 [1] | NetEagle | 2007.10.01 |
에디터의 옵션 설정하기.. 컴포넌트 보이지 않게 등.. [4] | 지허 | 2007.10.01 |
iframe사용시 세로길이 자동 조정되게 하기 [7] | 팔공산 | 2007.10.04 |