웹마스터 팁

  2. Support
  3. 웹마스터 팁

[iframe:아이프레임] 내용에 맞게 사이즈 조절하기 한번입력으로 끝.[다른방법:중복아닌듯]

2004.04.23 10:22

beMax

중복확인 해봤는데 엔지오에 있는 스크립트들은 보통

iframe 안에 들어갈 a.html 과 같은곳에 그스크립트를 넣어야 하더라구요

이방법으론 iframe에서 어떤페이지를 로드하던간에 그 속에 들어갈 페이지 안에는

반드시 사이즈를 조절할 스크립트가 들어가야합니다.

그래서 만든건데 이건 iframe 이 정의된 페이지에 한번만 넣어주시면 됩니다.

그럼 그속에 어떤페이지라도..단,! 자신의 계정에 있는 페이지 일때만 가능합니다. 이건 다른 스크립트랑 똑같네요

다른 계정의 페이지면 엑세스가 거부 됩니다.

/* 설명수정
다른계정이라 함은 자신의 사이트 외에 다른 사이트의 내용을
iframe으로 가져올때 자바스크립트로 접근이 안됩니다.
그래서 자신의 계정을 불러와야 하구요..
*/

+------------------------------------------------------------------------------------+
[2005-08-24] 내용수정
- 문뜩 반문객 사이트에 돌아다니다 보니 너무 느려서 iframe 의 onload 이벤트가 늦게 발생하여
스크롤만 잔뜩 내려간체로 그냥 있더군요.. 이런경우 링크를 클릭하면 onload 이벤트가 발생하기 전까진
이전의 사이즈를 유지하고 있음으로왠지 느리다는 느낌이 들더라구요 그래서 다른 이벤트를 찾아봤습니다.
이벤트는 onreadystatechange 이벤트구요
총 3번 호출됩니다.
1. loading
2. interactive
3. complete
그래서 총 3번 리사이징을 하게 됩니다.
특징은 목록과 내용을 와따가따 해보시면 알겁니다.
초기화가 되느냐 안되느냐의 차이정도입니다.
아무튼 예제 보시고 써보실 분들은 예제에 코드 포합했습니다.
예제 ] http://maxpond.netcci.net/etc/inner_iframe.html
+------------------------------------------------------------------------------------+


암튼 예제,소스 나갑니다.

일반예제 ) http://maxpond.netcci.net/etc/iframetest.html
하부프레임예제 ) http://maxpond.netcci.net/etc/iframetest.html?inner=1

[JavaScript] : <head>~</head> 사이에 넣어줍니다.
===========================================================
<script language='JavaScript' type='text/javascript'>
<!--
function resizeFrame(iframeObj){
/* 아이프레임에서 읽어들인 페이지의 body */
var innerBody = iframeObj.contentWindow.document.body;

/* 높이 다시설정 */
var innerHeight = innerBody.scrollHeight + (innerBody.offsetHeight - innerBody.clientHeight);
iframeObj.style.height = innerHeight;

/*---------- 넓이도 함께 자동조정되야 한다면 주석을 풀어주세요~--------------------------------
// 넓이 다시설정
var innerWidth = innerBody.scrollWidth + (innerBody.offsetWidth - innerBody.clientWidth);
iframeObj.style.width = innerWidth;    
---------------------------------------------------------------------------------------------------*/

this.scrollTo(1,1); //[락위듀]아렌티 님의 지적
}
//-->
</script>
===========================================================

[iframe]
===========================================================
아이프레이 태그 안에 다음 프로퍼티를 넣어줍니다.
onload="resizeFrame(this)"

ex) <iframe src="#" onload="resizeFrame(this)" scrolling="no"></iframe>
===========================================================


이러면 됩니다.

[2004-12-30 수정 스크립트]
----------------------------------------------------------------------------------------------------------------
윤상권님의 지적으로 수정하게 된 스크립트 입니다.
게시판에서 글쓰기 모드일때 textarea 의 사이즈를 늘려주는 기능을 이전 스크립트로는 처리하지 못했습니다.
그렇다고 해당게시판 스킨을 직접수정하기에도 번거러움이 있을것 같아서 아예 frame 속의 문서 전체에 이벤트를 걸어서
다시 사이즈 조정을 하도록 만들었습니다.

<script language='JavaScript' type='text/javascript'>
<!--
function resizeFrame(iframeObj){
        /* 아이프레임에서 읽어들인 페이지의 body */
        var innerBody = iframeObj.contentWindow.document.body;
        
        /*
        * 특정이벤트 발생시 다시 사이즈 조정!! ( 윤상권님의 지적 )
        * ex )
        * 항상 들어가야할 내용 입니다.
        * 혹시 아이프레임 속에 BODY 에 이미 이벤트가 정의 되어 있을경우를 위해
        * oldEvent = innerBody.ondbclick;
        * 위와 같은 식으로 이벤트를 백업받아놓으면 될듯 합니다.
        * 1. innerBody.ondbclick = function { resizeFrame(iframeObj, 1);oldEvent; };
        * 2. innerBody.onmousemove = function { resizeFrame(iframeObj, 1);oldEvent; };
        * 3. innerBody.onkeydown = function { resizeFrame(iframeObj, 1);oldEvent; };
        */
        oldEvent = innerBody.onclick;
        innerBody.onclick = function(){ resizeFrame(iframeObj, 1);oldEvent; };


        /*         높이 다시설정 */
        var innerHeight = innerBody.scrollHeight + (innerBody.offsetHeight - innerBody.clientHeight);
        iframeObj.style.height = innerHeight;

/*---------- 넓이도 함께 자동조정되야 한다면 주석을 풀어주세요~--------------------------------
        // 넓이 다시설정
        var innerWidth = innerBody.scrollWidth + (innerBody.offsetWidth - innerBody.clientWidth);
        iframeObj.style.width = innerWidth;    
---------------------------------------------------------------------------------------------------*/
        if( !arguments[1] )        /* 특정 이벤트로 인한 호출시 스크롤을 그냥 둔다. */
                this.scrollTo(1,1);
}
//-->
</script>

사용방법은 똑같습니다.
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
{주목} CodeRed 아파치로그파일 지우기 [2] skyel 2001.08.22
MySQL 관리 첫걸음 [5] 앤디(andy) 2001.04.18
APC(Alternativ PHP Cache) 사용법( php 캐쉬 플러그인 ) [1] file 김도한 2002.01.29
아파치 웹서버 속도 빠르게 하기 위한 최적화 팁 [14] 차카게살자 2002.01.27
[APM자동설치] APM_Setup 3 ( Apache, PHP4, MySQL, Perl, Tomcat ) [6] 근땅e 2002.02.06
커널 버전 알아내기 [1] 오픈소스 2002.02.21
vi 편집기 사용시 비프음 제어 오픈소스 2002.02.21
에러페이지를 서버관리자가 지정한 페이지로. [1] teenteenv 2002.02.21
[리눅스]proftp 에서 사용자가 상위 폴더로 이동을 못하게... [3] teenteenv 2002.02.22
[강좌1탄]와우리눅스7.0을 서버로 두고 인터넷공유 [1] RealComty 2002.02.23
[강좌2탄]와우리눅스7.0을 서버로 두고 인터넷공유 [1] RealComty 2002.02.23
[강좌3탄]와우리눅스7.0을 서버로 두고 인터넷공유 [4] RealComty 2002.02.23
[re] [강좌4탄]와우리눅스7.0을 서버로 두고 인터넷공유 [2] 주영명 2002.02.27
[강좌4탄]와우리눅스7.0을 서버로 두고 인터넷공유 [2] RealComty 2002.02.23
[강좌끝이다~!]와우리눅스7.0을 서버로 두고 인터넷공유 [8] RealComty 2002.02.23
메모리 절약하기 - 리눅스 오픈소스 2002.02.24
wuftp에서 proftp로...그리고, proftp 설정하기 [1] 쇠물택 2002.02.24
[sapzils서버세팅] A+P+M 소스 설치 [4] 쇠물택 2002.02.24
텔넷 사용자 관리... 쇠물택 2002.02.24
리눅스 시스템에서 시간 맞추기 [2] 쇠물택 2002.02.24
태그 쓰기