웹마스터 팁
팝업창을 내용에 맞게 크기 자동조정하기
2005.04.23 19:16
팝업창을 띄우는데, 내용에 맞게 창을 자동으로 조절해 주는 소스를 구하기가 어렵더군요.
제가 구한 소스는 부모창에서 크기를 조절하기 때문에, 팝업창의 로딩이 늦어지는 경우 부모창까지 영향을 미치게 되더군요.
그래서, 제가 소스를 좀 고쳐서 부모창은 팝업창을 열어 주기만 하고 팝업창이 스스로 크기를 바꾸도록 해 보았습니다.
잘 활용하시기 바랍니다.
부모창 스크립트
<script language='JavaScript' type='text/javascript'>
<!--
function Win( sURL, sName, scrollbars,left,top){
var win;
win = window.open(sURL, sName, "status=no,toolbar=no,resizable=no,scrollbars="+scrollbars+",menubar=no, width=1, height=1, left="+left+", top="+top);
win.opener.self;
}
//-->
</script>
<script language=javascript>
Win( 'popup.php?id=popup&no=1', 'popuppopup1','no','20','10');
</script>
팝업창 스크립트
<SCRIPT language="JavaScript">
<!--
function WindowReset( win /* Window Object */ ){ // 새창의 크기와 위치 재설정
//
// 새창의 진행상황 체크 완료되면 코드실행
//
//while(win.document.readyState != 'complete'){}
var winBody = win.document.body;
//
// 새창의 사이즈에 더해줄 marginWidth와 marginHeight
//
var marginHeight = parseInt(winBody.topMargin)+parseInt(winBody.bottomMargin);
var marginWidth = parseInt(winBody.leftMargin)+parseInt(winBody.rightMargin);
//
// 새창의 사이즈 설정
//
var wid = winBody.scrollWidth + (winBody.offsetWidth - winBody.clientWidth) + marginWidth-5;
var hei = winBody.scrollHeight + (winBody.offsetHeight - winBody.clientHeight) + marginHeight+17;
//
// 사이즈 재조정
//
win.resizeTo(wid, hei);
}
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" OnLoad="WindowReset(this)">
제가 구한 소스는 부모창에서 크기를 조절하기 때문에, 팝업창의 로딩이 늦어지는 경우 부모창까지 영향을 미치게 되더군요.
그래서, 제가 소스를 좀 고쳐서 부모창은 팝업창을 열어 주기만 하고 팝업창이 스스로 크기를 바꾸도록 해 보았습니다.
잘 활용하시기 바랍니다.
부모창 스크립트
<script language='JavaScript' type='text/javascript'>
<!--
function Win( sURL, sName, scrollbars,left,top){
var win;
win = window.open(sURL, sName, "status=no,toolbar=no,resizable=no,scrollbars="+scrollbars+",menubar=no, width=1, height=1, left="+left+", top="+top);
win.opener.self;
}
//-->
</script>
<script language=javascript>
Win( 'popup.php?id=popup&no=1', 'popuppopup1','no','20','10');
</script>
팝업창 스크립트
<SCRIPT language="JavaScript">
<!--
function WindowReset( win /* Window Object */ ){ // 새창의 크기와 위치 재설정
//
// 새창의 진행상황 체크 완료되면 코드실행
//
//while(win.document.readyState != 'complete'){}
var winBody = win.document.body;
//
// 새창의 사이즈에 더해줄 marginWidth와 marginHeight
//
var marginHeight = parseInt(winBody.topMargin)+parseInt(winBody.bottomMargin);
var marginWidth = parseInt(winBody.leftMargin)+parseInt(winBody.rightMargin);
//
// 새창의 사이즈 설정
//
var wid = winBody.scrollWidth + (winBody.offsetWidth - winBody.clientWidth) + marginWidth-5;
var hei = winBody.scrollHeight + (winBody.offsetHeight - winBody.clientHeight) + marginHeight+17;
//
// 사이즈 재조정
//
win.resizeTo(wid, hei);
}
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" OnLoad="WindowReset(this)">
댓글 2
-
물결
2005.05.07 13:33
-
물결
2005.05.07 13:35
일정 크기 이상 커지면 사이즈를 고정시켜야겠네요..
그 부분만 사용자 입맛에 따라 바꿔주면 좋은 팁입니다.
창 엄청 커지네요...