음...역시 필요에 의해..뭔가가 만들어지는군요....
부득이하게 게시판을 아이프레임으로 삽입해야하는 일이 있어서....
아이프레임의 동적 리사이즈에 대해 궁리하던중...
미니앨범이 그러하였듯이... 미니위니에 있는 좋은 팁들을 짜집기하여 좋은 스크립트가 하나 나왔네요...
1. 파이어폭스/인터넷익스플로러 모두 지원
2. 아이프레임 내부 페이지 뜰때 자동으로 리사이즈 (당연한거죠..ㅡ.ㅡ)
3. 이미 로딩이 끝난 아이프레임의 내부페이지에서 레이어가 보여지거나, 늘어나거나..입력창이 늘어나는등의... 페이지 크기 변화가 있을시 실시간으로 아이프레임도 리사이즈 됨.
(이것이..핵심기능이죠....ㅋㅋㅋ 기존 팁들이 2% 부족했던 부분이라고 생각되었던...)
예제: 여기를 클릭!
게시판이건.. 그냥 웹페이지건간에.. 모두 적용해서 쓰실수 있습니다.
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);
if (ifr.style.height != innerHeight) {
ifr.style.height = innerHeight;
}
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> 아래에 넣어주시면 됩니다...
이 팁을 이용하면..게시판 삽입이 훨씬 쉬워지겟군요... ^^
이상입니다...
샬롬~
