자동으로 iframe의 크기를 조절

출처 : 모름(돌아댕기다가 모아둔것 올리는 것이라 -_-a)

가끔 게시판이나 외부 사이트의 특정 페이지를 사이트에 iframe으로 동적으로 불러와야 할 경우

가 생기는데 동적으로 불러오다보면 불러온 내용 역시 동적(?)으로 나타나기 때문에 iframe의 크기

조절하기가 무척 힘들다는 ...

 

다음과 같은 스크립트를 사용하면 자동으로 iframe의 크기를 조절해 주는데 참 편하다는 ...

client side script이기 때문에 서버에 부하가 걸릴 염려도 없고 ~ 얼쑤 ~ ♪

 

 

다음과 같은 코드를 <script> ~ </script>에 넣어 주고서 ~

 

 

function resizeIF(Id)

{

        var obj = document.getElementById(Id);

        var Body;

        var H, Min;

        // 최소 높이 설정 (너무 작아지는 것을 방지)

        Min = 200;

        // DOM 객체 할당

        try

        {

                if (!document.all && obj.contentWindow.document.location.href

                        == 'about:blank') {

                        setTimeout("resizeIF('"+Id+"')", 10);

                        return;

                }

                Body = obj.contentWindow.document.getElementsByTagName('BODY');

                Body = Body[0];

                if (this.Location != obj.contentWindow.document.location.href) {

                        H = Body.scrollHeight + 5;

                        obj.style.height =  (H<Min?Min:H) + 'px';

                        this.Location = obj.contentWindow.document.location.href;

                }

        }

        catch(e)

        {

                setTimeout("resizeIF('"+Id+"')", 10);

                return;

        }

        setTimeout("resizeIF('"+Id+"')", 100);

}

 

 

iframe의 아래 부분에서 "new resizeIF('IF');"를 호출해 주면 알아서 자동으로 iframe의 사이

즈를 조절해 준다는;; (예전에는 일일이 나온 결과 수에 따라서 iframe의 크기를 pixel * x + y 같이

해줬다는;;)

 

 

단. 가끔 iframe에서 특이한(?) 페이지 이동이 있을 경우에 위 스크립트가 먹지 않을 경우가 있는데

이때는 iframe의 onLoad 이벤트에서 "new resizeIF('IF');"를 호출해 주면 잘 된다는 ...

 

물론 이때 iframe의 id는 당연히 "IF"가 되겠지요.

 

 

 

*. 꼬릿말1. 위 소스는 나의 악덕(?) 직속 상사 호석형의 홈피에서 퍼왔는데 ... ㅋㅋ 원제작자는 "행

복한고니"라는 별명(?)을 가진분이 작성(소스코드 위쪽에 쓰여있었음).

 

*. 꼬릿말2. 추가 적인 팁으로 ... 위의 스크립트로 iframe의 크기를 자동 조절할 경우 오른쪽에 스

크롤 바가 생겼다가 없어 지는데 ... 스크롤바를 안보이게 할려면 iframe의 속성에다가

"scrolling='no'"라고 명시해 주면 된답니다.

 

*. 꼬릿말3. iframe의 테두리를 안보이게 해주는 "frameborder='no'"는 당연히 해줘야 겠죠... ^^

 

[출처] [JavaScript] iframe 크기 자동 조절 스크립트|작성자 쪼구니

유동적인 IFRAME을 사용하시는것을 추천드립니다.

 

아래는 자동리사이즈 되는 iframe의 소스입니다.

 

<!--------------------------------------------------------------------------------------------------------------

 

<script>

function doResize()

{

container.height = myframe.document.body.scrollHeight+5;

container.width = myframe.document.body.scrollWidth+5;

}

</script>

 

<iframe src="주소" name="myframe" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="no" onload="doResize()" scroll="no"></iframe>

 

------------------------------------------------------------------------------------------------------------------>

유동iframe 사용시 스크롤바가 늘어나지 않는대신, 불러오는 페이지의 사이즈에 맞게 세로사이즈가 늘어나니 편합니다.