웹마스터 팁

  2. Support
  3. 웹마스터 팁

팝업창을 내용에 맞게 크기 자동조정하기

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)">
이 게시물을
수정 삭제
좋아요
목록
태그 쓰기