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>
내용이 넘어버리게 되면 스크롤바가 나타나서 불편하더군요.
세이클럽도 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>
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 1개
<!--
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>