테스트 사이트 - 개발 중인 베타 버전입니다

iframe 내용에 맞게 자동으로 크기 조절하기

iframe을 쓰면 페이지 로딩시간을 줄일 수 있어서 가끔쓰는데,
내용이 넘어버리게 되면 스크롤바가 나타나서 불편하더군요.
세이클럽도 iframe 을 열심히(?)하고 있는 곳인데, 자기네들한테 맞게 만들어진거라 좀 쓰기가 그렇더라구요.
그래서 간편하게 만들어봤습니다.

iframe에 들어가는 문서에 삽입해주셔야 합니다~ *^^*
<script>
// by 행복한고니(e-mail : gonom9 at empal.com, MSN : gonom9 at hotmail.com)

function resizeFrame(name){
var oBody = document.body;
var oFrame = parent.document.all(name);
var min_height = 320; //iframe의 최소높이(너무 작아지는 걸 막기위함, 픽셀단위, 편집가능)
var min_width = 465; //iframe의 최소너비
var i_height = oBody.scrollHeight + (oBody.offsetHeight-oBody.clientHeight);
var i_width = oBody.scrollWidth + (oBody.offsetWidth-oBody.clientWidth);

if(i_height < min_height) i_height = min_height;
if(i_width < min_width) i_width = min_width;
oFrame.style.height = i_height;
oFrame.style.width = i_width;

parent.scrollTo(1,1); //부모문서의 스크롤 위치를 1, 1로 옮긴다.(오감도님이 지적해주셨어요~^^)
}
</script>
위 함수를 삽입하고, 문서 제일 아래쪽에
<script>
var oldFn = "";
if(window.onload != null){
oldFn = new String(window.onload); //window.onload의 함수를 문자열로 받는다
oldFn = oldFn.substring(22,oldFn.length-2);
}
window.onload = new Function("resizeFrame(FRAMEID);" + oldFn); //새함수와 기존의 함수를 추가해서 onload이벤트에 할당
</script>
를 삽입해주세요. 가끔씩 body에 onLoad 이벤트를 쓰시는 분들이 있는데 그 분들을 위한 함수입니다.

사용하실땐
iframe에 id와 name 속성을 같은 이름으로 할당하셔야 합니다.
예)
<iframe id=innerFrame name=innerFrame></iframe>

<script>
...(생략)
window.onload = newFunction("resizeFrame('innerFrame');" + oldFn);
</script>

예제페이지 : http://ece.uos.ac.kr/~enc/gony/test.html
예제페이지 : http://ece.uos.ac.kr/~enc/gony/test2.html

제로보드 쓰시는 분들은
<script>
var oldFn = "";
if(window.onload != null){
oldFn = new String(window.onload); //window.onload의 함수를 문자열로 받는다
oldFn = oldFn.substring(22,oldFn.length-2);
}
window.onload = new Function("resizeFrame(FRAMEID);" + oldFn); //새함수와 기존의 함수를 추가해서 onload이벤트에 할당
</script>
이 부분을
<script>
var oldFn = new String(window.onload);
window.onload = new Function("resizeFrame(FRAMEID);" + oldFn); //새함수와 기존의 함수를 추가해서 onload이벤트에 할당
</script>
이렇게 바꿔주세요.

다시한번 말씀드리는데 iframe의 내용이 되는 문서에 삽입해주셔야 합니다.
그럼 이만~ *^^*

P.S// 괜찮으면 추천한방 때려주세요~ 룰루랄라~

알바를 알아봐야겠다... 슬슬 자금의 압박이... -_-;;


http://www.nzeo.com/bbs/zboard.php?id=p_javascript&page=1&sn1=&divpage=1&sn=off&ss=on&sc=off&select_arrange=vote&desc=desc&no=212<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

<SCRIPT LANGUAGE="JavaScript">
<!--
function resizeIframe(fr) {
fr.setExpression('height',aaa.document.body.scrollHeight);
fr.setExpression('width',aaa.document.body.scrollWidth);
}
//-->
</SCRIPT>


<iframe frameborder="0" id="aaa" scrolling="no" src="test.htm" onload="resizeIframe(this)"></iframe>

게시글 목록

번호 제목
10853
10852
10850
28848
10849
28847
10846
28846
10845
28845
10844
28844
28843
10843
28842
10842
28841
10841
28840
28839
10840
10839
24791
24789
10836
28838
24788
24787
24786
28837
28834
10835
10834
정규표현식 수수료계산
28833
28829
10833
10831
10830
10829
28828
10828
10827
10823
10822
10821
10820
28822
10814
10812
10811
10810
10808
10804
10797
28821
10796
10795
10794
10792
10789
10785
10781
10780
28820
10776
10769
10766
10765
10758
28818
10754
10753
10750
28817
10749
10748
10747
10746
10740
10738
10735
10734
28812
10730
10726
10725
28811
10724
10723
10722
10721
10717
10716
10715
10713
10712
10711
10710
10709
10708