웹마스터 팁

  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>

사용방법은 똑같습니다.
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
제로보드에서 iframe 높이 자동(유동적)조절(파폭,IE, 오페라,사파리,IETester) [11] file hhgyu 2010.09.17
1.7.3 최신버전 특정사이트 iframe(아이프레임) 일반회원 html적용가능하게 하기 [2] imgXE™ 2013.05.06
IE에서 스크립트 생성 iframe 요소에 name 속성 지정이 무시될 때 신평 2014.12.08
iframe을 이용하여 target효과 주기. [8] ZipShin 2002.08.01
SSL 적용시 작은 iframe 없애기 [1] file explode 2013.11.28
[10원팁] 크롬에서 글 작성시 IFRAME 박스가 생기는 경우 socialskyo 2014.01.03
iframe 등의 태그 화이트리스트 도메인 확인/추가하기 [1] Gunmania 2013.03.27
iframe 아이프레임 투명처리 꿈틀잉 2012.10.04
iframe을 이용한 악성코드 침투 - 치료 및 대응법 (검블러 or GENO) [8] file 미루819 2009.10.01
iframe 깨는 스크립트 입니다. [4] HB 2012.09.01
다른 도메인간 iframe 크기 자동조절(cross domain iframe auto resize) [2] 서기 2008.04.24
랜디님의 iframe 크기조절 소스응용-iframe 최저길이 지정하기 [1] 김수형 2004.09.10
[iframe:아이프레임] 내용에 맞게 사이즈 조절하기 한번입력으로 끝.[다른방법:중복아닌듯] [45] beMax 2004.04.23
두군데 IFRAME 위치에 내용 동시출력하기-프레임에도 가능 [4] 깜보 2003.02.22
iframe 내용에 맞게 자동으로 크기 조절하기 [36] 행복한고니 2002.11.21
IFRAME을 드래그해서 크롬리스처럼 사용하기 [16] 멀대 2002.10.21
Select의 값을 iframe으로 넣는것입니다. [3] ZipShin 2002.10.03
iFrame 문서크기에 맞게.. 초간단.. [10] 정명주 2002.08.02
[JavaScript] 익스플로러,네츠케이프 모두에서 iframe 과 비슷하게 해보자! [3] 티르 2002.01.24
iframe 그때그때 달라요 ~ [높이자동변경] [15] kim's 2005.02.18
태그 쓰기