[javascript] 아이프레임 자동리사이즈
로빈아빠
본문
1. 아이프레임 소스
<IFRAME id="iframe_main" name="iframe_main" marginWidth=0 marginHeight=0 src="inner_iframe.html" frameBorder=0 width="100%" height="100%" scrolling=no></IFRAME>
필요에 따라 topmargin=0 leftmargin=0 을 추가하실수도 있습니다...ㅡ.ㅡ
링크의 타겟지정하실때는 name 이 이용되는거 아시죠? ^^
src 는 알아서 맞추시구요... (제로보드일경우의 예제: src="/bbs/zboard.php?게시판아이디")
id 에 주의하십시오...
( id 는 꼭 있어야 함, 따옴표로 감싸주시길 권장, id 변경시 내부페이지의 스크립트에서도 한줄 변경해야함, 아이프레임 여러게 사용시 아이프레임과 내부 페이지의 스크립트에 동일하게 각각 다른아이디를 적용해서 중복사용가능 )
2. 아이프레임의 내부에 표시될 페이지의 상단에 넣어줄 스크립트
( <head></head> 사이여도 되고..아니여도 상관없음 ㅡ.ㅡ)
<script language='JavaScript' type='text/javascript'>
<!--
var ifr= parent.document.all? parent.document.all.iframe_main : parent.document.getElementById("iframe_main") ;
function do_resize() {
resizeFrame(1);
}
//가로길이는 유동적인 경우가 드물기 때문에 주석처리!
function resizeFrame(re) {
if (ifr) {
var innerHeight = document.body.scrollHeight + (document.body.offsetHeight - document.body.clientHeight);
//var innerWidth = document.body.scrollWidth + (document.body.offsetWidth - document.body.clientWidth);
if (ifr.style.height != innerHeight) //주석제거시 다음 구문으로 교체 -> if (ifr.style.height != innerHeight || ifr.style.width != innerWidth)
{
ifr.style.height = innerHeight;
//ifr.style.width = innerWidth;
}
if(!re) {
try{
document.body.attachEvent('onclick',do_resize);
//document.body.attachEvent('onkeyup',do_resize);
//글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
} catch(e) {
document.body.addEventListener("click", do_resize, false);
//document.body.addEventListener("keyup", do_resize, false);
//글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
}
}
}
}
//-->
</script>
3. 아이프레임의 내부에 표시될 페이지의 하단에 넣어줄 스크립트
(거의 페이지의 최하단에... </html> 윗줄에 넣어줄것을 권장...)
<script>
window.onload=function(){
resizeFrame();
}
</script>
위의 스크립트로 정상작동한다면... 굿!!!
그러나....
다른 스크립트와 엉켜서 온로드시 리사이즈가 않되면 아래 스크립트로 교체!
<script>
document.body.scrollIntoView(true);
parent.window.scrollTo(0,0);
resizeFrame();
</script>
*parent.window.scrollTo(0,0); 를 제거하시면, 페이지의 상단으로 로드되지 않고... 아이프레임의 시작부분으로 자동스크롤 됩니다.,
2번에서 아이프레임 내부 페이지의 상단에 삽입된 스크립트를 보시면 가로길이도 유동적으로 리사이즈해주는 스크립트입니다...근데 잘 않쓰여질듯해서 주석처리 했습니다... 참고하시길...
제로보드 게시판에 적용하실분들은...
2번의 스크립트를 게시판 상단에 출력할 내용 의 <div align=center> 위에 넣으시고...
3번의 스크립트를 게시판 하단에 출력할 내용 의 </div> 아래에 넣어주시면 됩니다...
이 팁을 이용하면..게시판 삽입이 훨씬 쉬워지겟군요... ^^
이상입니다...
[이 게시물은 VIRHAC님에 의해 2009-09-13 14:36:02 HTML에서 이동 됨]
<IFRAME id="iframe_main" name="iframe_main" marginWidth=0 marginHeight=0 src="inner_iframe.html" frameBorder=0 width="100%" height="100%" scrolling=no></IFRAME>
필요에 따라 topmargin=0 leftmargin=0 을 추가하실수도 있습니다...ㅡ.ㅡ
링크의 타겟지정하실때는 name 이 이용되는거 아시죠? ^^
src 는 알아서 맞추시구요... (제로보드일경우의 예제: src="/bbs/zboard.php?게시판아이디")
id 에 주의하십시오...
( id 는 꼭 있어야 함, 따옴표로 감싸주시길 권장, id 변경시 내부페이지의 스크립트에서도 한줄 변경해야함, 아이프레임 여러게 사용시 아이프레임과 내부 페이지의 스크립트에 동일하게 각각 다른아이디를 적용해서 중복사용가능 )
2. 아이프레임의 내부에 표시될 페이지의 상단에 넣어줄 스크립트
( <head></head> 사이여도 되고..아니여도 상관없음 ㅡ.ㅡ)
<script language='JavaScript' type='text/javascript'>
<!--
var ifr= parent.document.all? parent.document.all.iframe_main : parent.document.getElementById("iframe_main") ;
function do_resize() {
resizeFrame(1);
}
//가로길이는 유동적인 경우가 드물기 때문에 주석처리!
function resizeFrame(re) {
if (ifr) {
var innerHeight = document.body.scrollHeight + (document.body.offsetHeight - document.body.clientHeight);
//var innerWidth = document.body.scrollWidth + (document.body.offsetWidth - document.body.clientWidth);
if (ifr.style.height != innerHeight) //주석제거시 다음 구문으로 교체 -> if (ifr.style.height != innerHeight || ifr.style.width != innerWidth)
{
ifr.style.height = innerHeight;
//ifr.style.width = innerWidth;
}
if(!re) {
try{
document.body.attachEvent('onclick',do_resize);
//document.body.attachEvent('onkeyup',do_resize);
//글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
} catch(e) {
document.body.addEventListener("click", do_resize, false);
//document.body.addEventListener("keyup", do_resize, false);
//글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
}
}
}
}
//-->
</script>
3. 아이프레임의 내부에 표시될 페이지의 하단에 넣어줄 스크립트
(거의 페이지의 최하단에... </html> 윗줄에 넣어줄것을 권장...)
<script>
window.onload=function(){
resizeFrame();
}
</script>
위의 스크립트로 정상작동한다면... 굿!!!
그러나....
다른 스크립트와 엉켜서 온로드시 리사이즈가 않되면 아래 스크립트로 교체!
<script>
document.body.scrollIntoView(true);
parent.window.scrollTo(0,0);
resizeFrame();
</script>
*parent.window.scrollTo(0,0); 를 제거하시면, 페이지의 상단으로 로드되지 않고... 아이프레임의 시작부분으로 자동스크롤 됩니다.,
2번에서 아이프레임 내부 페이지의 상단에 삽입된 스크립트를 보시면 가로길이도 유동적으로 리사이즈해주는 스크립트입니다...근데 잘 않쓰여질듯해서 주석처리 했습니다... 참고하시길...
제로보드 게시판에 적용하실분들은...
2번의 스크립트를 게시판 상단에 출력할 내용 의 <div align=center> 위에 넣으시고...
3번의 스크립트를 게시판 하단에 출력할 내용 의 </div> 아래에 넣어주시면 됩니다...
이 팁을 이용하면..게시판 삽입이 훨씬 쉬워지겟군요... ^^
이상입니다...
[이 게시물은 VIRHAC님에 의해 2009-09-13 14:36:02 HTML에서 이동 됨]
관련링크
댓글목록
등록된 댓글이 없습니다.