웹마스터 팁

  2. Support
  3. 웹마스터 팁

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

2002.11.21 17:12

행복한고니

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// 괜찮으면 추천한방 때려주세요~ 룰루랄라~
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
구미오피 ⦑출장마사지안내.COM⦒ 구미오피 구미OP 구미건마 구미오피 koykoyah 2025.02.25
대전마사지【출장안마사이트.COM】대전마사지 대전 마사지 대전마사지 songkangkong767 2025.02.25
안양오피 ⦑오피.CLUB⦒ 안양오피 안양OP 안양건마 안양오피 koykoyah 2025.02.25
판교1인샵【출장마사지안내.COM】판교스웨디시 판교안마 판교마사지 songkangkong767 2025.02.25
판교오피 ⦑오피.CLUB⦒ 판교OP 판교오피 판교출장샵 판교오피 koykoyah 2025.02.25
해운대안마【오피쓰.COM】해운대안마 해운대 안마 해운대안마 songkangkong767 2025.02.25
분당오피 ⦑출장안마사이트.COM⦒ 분당마사지 분당오피 분당오피 분당OP koykoyah 2025.02.25
평택마사지【오피.CLUB】평택 마사지 평택마사지 평택마사지 songkangkong767 2025.02.25
부산오피 부산오피 ⦑출장마사지안내.COM⦒ 부산OP 부산스파 부산오피 koykoyah 2025.02.25
의정부마사지【오피.CLUB】의정부안마 의정부스웨디시 의정부1인샵 songkangkong767 2025.02.25
부평오피 부평오피 ⦑출장안마사이트.COM⦒ 부평OP 부평스파 부평오피 koykoyah 2025.02.25
안산안마【출장안마사이트.COM】안산안마 안산 안마 안산안마 songkangkong767 2025.02.25
산본오피 ⦑오피.CLUB⦒ 산본OP 산본오피 산본출장샵 산본오피 koykoyah 2025.02.25
홍대마사지【오피사이트.NET】홍대마사지 홍대 마사지 홍대마사지 songkangkong767 2025.02.25
압구정오피 압구정출장안마 ⦑오피사이트.NET⦒ 압구정OP 압구정오피 압구정오피 koykoyah 2025.02.25
영등포스웨디시【오피쓰주소.COM】영등포 스웨디시 영등포스웨디시 영등포스웨디시 songkangkong767 2025.02.25
연신내오피 ⦑출장안마사이트.COM⦒ 연신내마사지 연신내오피 연신내오피 연신내OP koykoyah 2025.02.25
천안마사지【오피.CLUB】천안안마 천안스웨디시 천안1인샵 songkangkong767 2025.02.25
강북오피 강북OP ⦑오피쓰주소.COM⦒ 강북휴게텔 강북오피 강북오피 koykoyah 2025.02.25
강남1인샵【오피쓰주소.COM】강남 1인샵 강남1인샵 강남1인샵 songkangkong767 2025.02.25
태그 쓰기