YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > Javascript
검색
멤버이름    오토
비밀번호 
 

아이프레임 표에 맞게 리사이즈

페이지 정보

작성자 MintState 댓글 0건 조회 10,573회 작성일 08-10-29 20:37

본문

아이프레임 표에 맞게 리사이즈

아이프레임 페이지의 사이즈에 맞게.. 높이가 조정 됩니다.
아이프레임은 요즘 브라우저들은 거의 지원하고 있으나 예전버전의 브라우저는 지원하지 않는 것도 있습니다.
또한 이 소스는 인터넷 환경이 늦을 경우 동작을 하지 않는 경우 도 있습니다.
따로 아이프레임 페이지를 링크 시켜주는 메너가 필요 하겠죠
<script>
function resizeFrame(iframeObj){
    var innerBody = iframeObj.contentWindow.document.body;
    var innerHeight = innerBody.scrollHeight + (innerBody.offsetHeight - innerBody.clientHeight);
    var innerWidth = innerBody.scrollWidth + (innerBody.offsetWidth - innerBody.clientWidth);
    iframeObj.style.height = innerHeight;
    iframeObj.style.width = innerWidth;
}
</script>

<iframe frameborder=0 width=540 src=주소 onload="resizeFrame(this)"></iframe>



* 다른 방법 (비슷 합니다.)
<SCRIPT LANGUAGE="JavaScript">
<!--
function resizeHeight(fr) {
                fr = typeof fr == 'string' ? document.getElementById(fr) : fr;
                fr.setExpression('height',aaa.document.body.scrollHeight);
                fr.setExpression('width',aaa.document.body.scrollWidth);
}
//-->
</SCRIPT>

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



* 다른 방법
<script>
window.onload = function() {
  resizeTo(560,document.body.scrollHeight+10);
}
window.scrollTo(0,0);
</script>
<div id=centerLayer style=position:absolute;><div id=boardLayer style=position:absolute;top:0px;left:0px;><iframe src="주소" border=no frameborder=0 topmargin=0 leftmargin=0 width=560 height=10000 scrolling=no></iframe></div></div>



추가.. 다른 방법...
<head> 와 </head> 사이에
<script>

    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>


이 소스를 삽입 합니다..참고로 이 소스에서는 다른 수정이나, 설정 작업은
필요 없습니다.
그냥 이 원본 그대로 삽입 해 주세요..
그런 다음에..
<body> 와 </body> 사이 가장 마지막 줄에
<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('333innerFrame333');" + oldFn); //새함수와 기존의 함수를 추가해서 onload이벤트에 할당
</script>


이 소스를 삽입 해 줍니다.
여기서! '333innerFrame333' 이 부분을 넣고 싶은 이름으로 넣습니다.
그럼 아이프레임 대상 문서에는 모두 소스 작업이 끝난 것입니다.
음..
그런데..한가지 중요한 사실..
아이프레임에 보여질 페이지는 모두 상단의 소스가 삽입되어 있어야 합니다.
모두모두~

그런 다음에..
아이프레임을 넣을 곳에 하단의 소스를 삽입 합니다.

<iframe src="보여질주소" id="333innerFrame333" name="333innerFrame333"></iframe>


이렇게,,삽입 합니다.
여기서 눈치 채신 분이 있을걸로 아는데요^^;
잘 보면 "333innerFrame333" 가 있죠?^^
"333innerFrame333" <- 이것은 아까 두번째 소스중
window.onload = new Function("resizeFrame('333innerFrame333');" + oldFn);
이 부분의 '333innerFrame333' 와 같은 이름이 써져 있어야 하는 것!!

댓글목록

등록된 댓글이 없습니다.

Total 178건 9 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
18 MintState 8032 10-31
17 MintState 9626 10-31
16 MintState 8323 10-30
15 MintState 9732 10-29
14 MintState 9843 10-29
13 MintState 10479 10-29
12 MintState 8803 10-29
11 MintState 8383 10-29
10 MintState 8013 10-29
9 MintState 8834 10-29
8 MintState 9726 10-29
7 MintState 8533 10-29
6 MintState 10260 10-29
5 MintState 10804 10-29
4 MintState 9724 10-29
3 MintState 8641 10-29
2 MintState 8646 10-29
열람중 MintState 10574 10-29
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2021, YesYo.com MintState. ™