웹마스터 팁

  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>

사용방법은 똑같습니다.
이 게시물을
수정 삭제
좋아요
목록
태그 쓰기