아이프레임 자동 리사이즈
출처 : http://tong.nate.com/esyoon54/18104072
본문 내용
===========================================================================
음...역시 필요에 의해..뭔가가 만들어지는군요....
부득이하게 게시판을 아이프레임으로 삽입해야하는 일이 있어서....
아이프레임의 동적 리사이즈에 대해 궁리하던중...
미니앨범이 그러하였듯이... 미니위니에 있는 좋은 팁들을 짜집기하여 좋은 스크립트가 하나 나왔네요...
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);
//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> 아래에 넣어주시면 됩니다...
이상입니다...
위에가 원래 팁이었구요....
아래는 추가/ 수정된겁니다... 아래꺼를 강추합니다... ^^
원래 팁은.. 아이프레임의 내부에 들어가는 페이지나 게시판에 소스를 넣었었죠...
그러다보니.. 밖에 아이프레임을 가지고 있는 페이지는 하나인데.. 내부에 페이지는 많은 경우가 있죠... 그럴때.. 내부에 들어가는 페이지들 마다 일일이 열어서 스크립트 넣어주기 귀찮아서...
다시 소스를 손봤더니.. 아이프레임 태그가 들어가는 페이지에 한번만 추가 하면 되게 되더군요...
첨부터 왜 이렇게 못했을가..ㅡ.ㅡ
물론..!! 아이프레임의 내부페이지는 같은 도메인 안에 있어야 합니다...
(다른도메인의 페이지를 불러오면서..내부 페이지에 아무 수정없이 리사이즈 되는팁 있으시면 저도 좀 알려주세요..ㅡ.ㅡ..보안상 힘들다는 이야기를 들었습니다만...)
iframe 태그가 들어가는 페이지에 아래 스크립트를 추가합니다... (역시..head의 안이던 밖이던....간에..)
<script language='JavaScript' type='text/javascript'>
<!--
function do_resize() {
resizeFrame("iframe_main",1);
}
function resizeFrame(ifr_id,re){
//가로길이는 유동적인 경우가 드물기 때문에 주석처리!
var ifr= document.getElementById(ifr_id) ;
var innerBody = ifr.contentWindow.document.body;
var innerHeight = innerBody.scrollHeight + (innerBody.offsetHeight - innerBody.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{
innerBody.attachEvent('onclick',parent.do_resize);
innerBody.attachEvent('onkeyup',parent.do_resize);
//글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
} catch(e) {
innerBody.addEventListener("click", parent.do_resize, false);
innerBody.addEventListener("keyup", parent.do_resize, false);
//글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
}
}
}
//-->
</script>
그리고 아이프레임테그는 아래 처럼 넣어줍니다.
<IFRAME id="iframe_main" name="iframe_main" src="inner_frame.html" marginWidth=0 marginHeight=0 frameBorder=0 width="100%" height="100%" scrolling=no onload="resizeFrame(this.id,false);"></IFRAME>
필요에 따라 topmargin=0 leftmargin=0 을 추가하실수도 있습니다...ㅡ.ㅡ
링크의 타겟지정하실때는 name 이 이용되는거 아시죠? ^^
src 는 알아서 맞추시구요... (제로보드일경우의 예제: src="/bbs/zboard.php?게시판아이디")
id 에 주의하십시오...
이전팁은.. 한페이지에 아이프레임이 한개 이상있을때.. 내부페이지의 스크립트 수정과 아이프레임의 아이디 수정으로 다중적용하기가 편하구요..
이 팁은.. 아이프레임은 한개인데.. 내부에 불러오는 페이지가 여러개 일때 편리하군요... 골라서 쓰시길.. ^^
이상!
추가사항:
배경음악 또는 주소고정의 목적으로 프레임으로 나눠서 쓰시는분들은..않될수도 있습니다...
if(!re) {
try{
innerBody.attachEvent('onclick',parent.do_resize);
innerBody.attachEvent('onkeyup',parent.do_resize);
//글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
} catch(e) {
innerBody.addEventListener("click", parent.do_resize, false);
innerBody.addEventListener("keyup", parent.do_resize, false);
//글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
}
}
이 부분을 제거하시고 그자리에 대신해서....
setTimeout("resizeFrame('iframe_main',1)",100);
을 넣어주세요... ^^
출처 : http://tong.nate.com/esyoon54/18104072
본문 내용
===========================================================================
음...역시 필요에 의해..뭔가가 만들어지는군요....
부득이하게 게시판을 아이프레임으로 삽입해야하는 일이 있어서....
아이프레임의 동적 리사이즈에 대해 궁리하던중...
미니앨범이 그러하였듯이... 미니위니에 있는 좋은 팁들을 짜집기하여 좋은 스크립트가 하나 나왔네요...
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);
//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> 아래에 넣어주시면 됩니다...
이상입니다...
위에가 원래 팁이었구요....
아래는 추가/ 수정된겁니다... 아래꺼를 강추합니다... ^^
원래 팁은.. 아이프레임의 내부에 들어가는 페이지나 게시판에 소스를 넣었었죠...
그러다보니.. 밖에 아이프레임을 가지고 있는 페이지는 하나인데.. 내부에 페이지는 많은 경우가 있죠... 그럴때.. 내부에 들어가는 페이지들 마다 일일이 열어서 스크립트 넣어주기 귀찮아서...
다시 소스를 손봤더니.. 아이프레임 태그가 들어가는 페이지에 한번만 추가 하면 되게 되더군요...
첨부터 왜 이렇게 못했을가..ㅡ.ㅡ
물론..!! 아이프레임의 내부페이지는 같은 도메인 안에 있어야 합니다...
(다른도메인의 페이지를 불러오면서..내부 페이지에 아무 수정없이 리사이즈 되는팁 있으시면 저도 좀 알려주세요..ㅡ.ㅡ..보안상 힘들다는 이야기를 들었습니다만...)
iframe 태그가 들어가는 페이지에 아래 스크립트를 추가합니다... (역시..head의 안이던 밖이던....간에..)
<script language='JavaScript' type='text/javascript'>
<!--
function do_resize() {
resizeFrame("iframe_main",1);
}
function resizeFrame(ifr_id,re){
//가로길이는 유동적인 경우가 드물기 때문에 주석처리!
var ifr= document.getElementById(ifr_id) ;
var innerBody = ifr.contentWindow.document.body;
var innerHeight = innerBody.scrollHeight + (innerBody.offsetHeight - innerBody.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{
innerBody.attachEvent('onclick',parent.do_resize);
innerBody.attachEvent('onkeyup',parent.do_resize);
//글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
} catch(e) {
innerBody.addEventListener("click", parent.do_resize, false);
innerBody.addEventListener("keyup", parent.do_resize, false);
//글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
}
}
}
//-->
</script>
그리고 아이프레임테그는 아래 처럼 넣어줍니다.
<IFRAME id="iframe_main" name="iframe_main" src="inner_frame.html" marginWidth=0 marginHeight=0 frameBorder=0 width="100%" height="100%" scrolling=no onload="resizeFrame(this.id,false);"></IFRAME>
필요에 따라 topmargin=0 leftmargin=0 을 추가하실수도 있습니다...ㅡ.ㅡ
링크의 타겟지정하실때는 name 이 이용되는거 아시죠? ^^
src 는 알아서 맞추시구요... (제로보드일경우의 예제: src="/bbs/zboard.php?게시판아이디")
id 에 주의하십시오...
이전팁은.. 한페이지에 아이프레임이 한개 이상있을때.. 내부페이지의 스크립트 수정과 아이프레임의 아이디 수정으로 다중적용하기가 편하구요..
이 팁은.. 아이프레임은 한개인데.. 내부에 불러오는 페이지가 여러개 일때 편리하군요... 골라서 쓰시길.. ^^
이상!
추가사항:
배경음악 또는 주소고정의 목적으로 프레임으로 나눠서 쓰시는분들은..않될수도 있습니다...
if(!re) {
try{
innerBody.attachEvent('onclick',parent.do_resize);
innerBody.attachEvent('onkeyup',parent.do_resize);
//글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
} catch(e) {
innerBody.addEventListener("click", parent.do_resize, false);
innerBody.addEventListener("keyup", parent.do_resize, false);
//글작성 상황에서 클릭없이 타이핑하면서 창이 늘어나는 상황이면 윗줄 주석제거
}
}
이 부분을 제거하시고 그자리에 대신해서....
setTimeout("resizeFrame('iframe_main',1)",100);
을 넣어주세요... ^^