홈>컴퓨터이야기
logo_01.gif


TOTAL ARTICLE : 91, TOTAL PAGE : 1 / 5
구분 웹일반 | 태그-소스 | 제로보드 | 그누보드 |
태그-소스 : 아이프레임 자동 리사이즈
 오예    | 2005·08·26 15:17 | HIT : 2,865 | VOTE : 82

음...역시 필요에 의해..뭔가가 만들어지는군요....

부득이하게 게시판을 아이프레임으로 삽입해야하는 일이 있어서....

아이프레임의 동적 리사이즈에 대해 궁리하던중...

미니앨범이 그러하였듯이... 미니위니에 있는 좋은 팁들을 짜집기하여 좋은 스크립트가 하나 나왔네요...

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

예제: 여기를 클릭!

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


1. 아이프레임 소스


<IFRAME id="iframe_main" name="iframe_main" marginWidth=0 marginHeight=0 src="inner_iframe.html" frameBorder=0 width="100%" height="100%" scrolling=no></IFRAME>

필요에 따라 topmargin=0 leftmargin=0 을 추가하실수도 있습니다...ㅡ.ㅡ

링크의 타겟지정하실때는 name 이 이용되는거 아시죠? ^^

src 는 알아서 맞추시구요... (제로보드일경우의 예제: src="/bbs/zboard.php?게시판아이디")

id 에 주의하십시오...
( id 는 꼭 있어야 함, 따옴표로 감싸주시길 권장, id 변경시 내부페이지의 스크립트에서도 한줄 변경해야함, 아이프레임 여러게 사용시 아이프레임과 내부 페이지의 스크립트에 동일하게 각각 다른아이디를 적용해서 중복사용가능 )


2. 아이프레임의 내부에 표시될 페이지의 상단에 넣어줄 스크립트
( <head></head> 사이여도 되고..아니여도 상관없음 ㅡ.ㅡ)


<script language='JavaScript' type='text/javascript'>
  <!--
  var ifr= parent.document.all? parent.document.all.iframe_main : parent.document.getElementById("iframe_main") ;

  function do_resize() {
   resizeFrame(1);
  }

 //가로길이는 유동적인 경우가 드물기 때문에 주석처리!
 function resizeFrame(re) {
   if (ifr) {
   var innerHeight = document.body.scrollHeight + (document.body.offsetHeight - document.body.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{
     document.body.attachEvent('onclick',do_resize);
     //document.body.attachEvent('onkeyup',do_resize);
     //글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
    } catch(e) {
     document.body.addEventListener("click", do_resize, false);
     //document.body.addEventListener("keyup", do_resize, false);
     //글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
    }
   }
  }
 }
//-->
</script>


3. 아이프레임의 내부에 표시될 페이지의 하단에 넣어줄 스크립트
(거의 페이지의 최하단에... </html> 윗줄에 넣어줄것을 권장...)

  <script>
    window.onload=function(){
    resizeFrame();
    }
  </script>

위의 스크립트로 정상작동한다면... 굿!!!
그러나....
다른 스크립트와 엉켜서 온로드시 리사이즈가 않되면 아래 스크립트로 교체!

  <script>
   document.body.scrollIntoView(true);
   parent.window.scrollTo(0,0);
   resizeFrame();
  </script>

*parent.window.scrollTo(0,0); 를 제거하시면, 페이지의 상단으로 로드되지 않고... 아이프레임의 시작부분으로 자동스크롤 됩니다.,


2번에서 아이프레임 내부 페이지의 상단에 삽입된 스크립트를 보시면 가로길이도 유동적으로 리사이즈해주는 스크립트입니다...근데 잘 않쓰여질듯해서 주석처리 했습니다... 참고하시길...

제로보드 게시판에 적용하실분들은...

2번의 스크립트를 게시판 상단에 출력할 내용 의 <div align=center> 위에 넣으시고...
3번의 스크립트를 게시판 하단에 출력할 내용 의 </div> 아래에 넣어주시면 됩니다...


이 팁을 이용하면..게시판 삽입이 훨씬 쉬워지겟군요... ^^


이상입니다...

샬롬~
난! 자유인...
  
91 제로보드   GD를 이용하여 썸네일을 제로보드 갤러리에 적용시키기 2  오예 04·05·20 3484 254
90 제로보드   여러게시판 최근게시물 통합하여 뽑기 2차 수개 버젼입니다.  오예 04·05·28 5178 390
89 태그-소스   [태그]그림에서 오른쪽 마우스 작동안되게 하는법  오예 04·06·02 2589 266
88 제로보드   [제로보드]제로보드 최신버전에서 플래시 메뉴 사용할때 새로고침 안되는 문제  오예 04·08·30 4028 299
87 제로보드   [제로보드]새로고침 후에도 현재 페이지 계속 보이기  오예 04·08·30 2886 299
86 태그-소스   [태그]embed 태그의 못든 것  오예 04·10·20 3233 201
85 태그-소스   [태그]object 태그(iframe 대신 사용) 2  오예 04·12·31 2175 113
84 태그-소스   [태그]iframe 태그  오예 04·12·31 2344 111
83 제로보드   게시판에 스팸방지하기  오예 05·01·19 2446 160
82 태그-소스   [태그]소스보기 막기 모음  오예 05·05·04 2117 103
81 태그-소스   [태그]소스보기 막기 강좌  오예 05·05·04 2124 106
80 제로보드   최근 게시물보기 속도 빠르게 만들기  오예 05·06·02 3373 119
79 제로보드   GD게시판의 썸네일을 이용해 겔러리 최근파일 빠르게 보여주기  오예 05·06·08 2010 116
78 제로보드    [팁]게시물 작성시 내용을 복사해주기  오예 05·06·21 2214 128
77 제로보드   갤러리에 한글이름 적용하기  오예 09·06·29 3637 217
76 제로보드   제로보드에 웹에디터 사용하기(미니위니)  오예 05·06·21 3041 166
75 태그-소스   스크롤바 색상바꾸기  오예 05·02·02 2011 138
태그-소스   아이프레임 자동 리사이즈  오예 05·08·26 2865 82
73 제로보드   게시판 게시물 밑에 회원사진 출력하기  오예 05·09·13 1892 82
72 제로보드   회원사진 리사이즈  오예 05·09·14 1827 89
12345
Copyright 1999-2020 Zeroboard / skin by GGAMBO