본문 바로가기

스크립트/윈도우창관련

IFRAME 자동 리사이즈 auto resize 최강 스크립트 - 알릭님껏


1. 파이어폭스/인터넷익스플로러 모두 지원
2. 아이프레임 내부 페이지 뜰때 자동으로 리사이즈 (당연한거죠..ㅡ.ㅡ)
3. 이미 로딩이 끝난 아이프레임의 내부페이지에서 레이어가 보여지거나, 늘어나거나..입력창이 늘어나는등의... 페이지 크기 변화가 있을시 실시간으로 아이프레임도 리사이즈 됨.
(이것이..핵심기능이죠....ㅋㅋㅋ 기존 팁들이 2% 부족했던 부분이라고 생각되었던...)

게시판이건.. 그냥 웹페이지건간에.. 모두 적용해서 쓰실수 있습니다.


iframe 태그가 들어가는 페이지에 아래 스크립트를 추가합니다... (역시..head의 안이던 밖이던....간에..)


<script language='JavaScript' type='text/javascript'>
<!--
      function do_resize() {
       resizeFrame("iframe_main",1);
      }

      function resizeFrame(ifr_id,re){
     //가로길이는 유동적인 경우가 드물기 때문에 주석처리!
       var ifr= document.getElementById(ifr_id) ;
       var innerBody = ifr.contentWindow.document.body;
       var innerHeight = innerBody.scrollHeight + (innerBody.offsetHeight - innerBody.clientHeight);
       //var innerWidth = document.body.scrollWidth + (document.body.offsetWidth - document.body.clientWidth);

       if (ifr.style.height != innerHeight) //주석제거시 다음 구문으로 교체 -> if (ifr.style.height != innerHeight || ifr.style.width != innerWidth)
       {
        ifr.style.height = innerHeight;
        //ifr.style.width = innerWidth;
       }

       if(!re) {
        try{
         innerBody.attachEvent('onclick',parent.do_resize);
         innerBody.attachEvent('onkeyup',parent.do_resize);
         //글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
        } catch(e) {
         innerBody.addEventListener("click", parent.do_resize, false);
         innerBody.addEventListener("keyup", parent.do_resize, false);
         //글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
        }
       }
      }

      //-->
     </script>



그리고 아이프레임테그는 아래 처럼 넣어줍니다.


<IFRAME id="iframe_main" name="iframe_main" src="inner_frame.html" marginWidth=0 marginHeight=0 frameBorder=0 width="100%" height="100%" scrolling=no onload="resizeFrame(this.id,false);"></IFRAME>




필요에 따라 topmargin=0 leftmargin=0 을 추가하실수도 있습니다...ㅡ.ㅡ
링크의 타겟지정하실때는 name 이 이용되는거 아시죠? ^^
src 는 알아서 맞추시구요... (제로보드일경우의 예제: src="/bbs/zboard.php?게시판아이디")

id 에 주의하십시오...

이전팁은.. 한페이지에 아이프레임이 한개 이상있을때.. 내부페이지의 스크립트 수정과 아이프레임의 아이디 수정으로 다중적용하기가 편하구요..

이 팁은.. 아이프레임은 한개인데.. 내부에 불러오는 페이지가 여러개 일때 편리하군요... 골라서 쓰시길.. ^^

이상!


추가사항:

배경음악 또는 주소고정의 목적으로 프레임으로 나눠서 쓰시는분들은..않될수도 있습니다...

       if(!re) {
        try{
         innerBody.attachEvent('onclick',parent.do_resize);
         innerBody.attachEvent('onkeyup',parent.do_resize);
         //글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
        } catch(e) {
         innerBody.addEventListener("click", parent.do_resize, false);
         innerBody.addEventListener("keyup", parent.do_resize, false);
         //글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
        }
       }
 
이 부분을 제거하시고 그자리에 대신해서....

setTimeout("resizeFrame('iframe_main',1)",100);

을 넣어주세요... ^^