웹마스터 팁
팝업창을 내용에 맞게 크기 자동조정하기
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
일정 크기 이상 커지면 사이즈를 고정시켜야겠네요..
그 부분만 사용자 입맛에 따라 바꿔주면 좋은 팁입니다.
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
페이지 타입 바꾸는 방법 (문서, 위젯, 외부페이지)
[5]
 | 빛의바다 | 2012.07.31 |
| 소셜로그인 이메일 입력시 SSL 사용 | 패시브 | 2012.07.27 |
|
게시판 메뉴에 새글 알림 표시 띄우기
[13]
| 보거스내친구 | 2009.06.21 |
|
JwPlayer.swf 스킨 변경하기
[12]
| 귀여운유니 | 2012.02.20 |
| 중국어(zh-CN) 포함한 다국어시 페이지모듈 버그 해결법 [1] | sejin7940 | 2012.07.26 |
| virtualhost 사용에 관한 잡담 [3] | 인터니즈™ | 2012.06.15 |
|
로그인 정보 폼에 읽지 않은 쪽지 개수 보이기.
[21]
| 무얼까 | 2011.07.23 |
| 작성 글 보기에서 특정 모듈의 글 안나타나게 하기 | SCAC | 2012.07.21 |
| 1.5.1 최근 글 위젯에서 특수문자가 나가는 현상 [7] | Crom | 2012.02.12 |
| 관리자에서 그룹검색을 이용한 회원목록 제대로 안 보일때.. [2] | sejin7940 | 2012.06.01 |
|
IIS 7.5 + XE 업로드 용량 개선 방법
[1]
| 류군 | 2012.07.16 |
| XE 문서 및 게시판 첨부파일 증발 오류시 [1] | Ooops | 2012.05.10 |
| 첨부파일 증발되면 이 방법을 써보세요. [2] | 쌘쓰쟁이 | 2012.06.23 |
|
회원 가입 시 IP 중복 검사
[30]
| CMD | 2012.02.24 |
| XE사용 Mysql DB를 InnoDB로 바꿔봅시다 ※서버환경 사용자에 한함 [4] | 흰색앵초 | 2012.06.30 |
|
회원가입 이메일 수취 여부 선택 초기화
| 아모스리 | 2012.07.07 |
| 카르마님의 외부이미지 자동저장애드온 한글이미지 저장 [1] | 패시브 | 2012.07.03 |
| XE 1.5 이상에서 모바일 페이지 별도 구성 원하는 경우 | sejin7940 | 2012.06.23 |
|
게시판의 제목제거
| saladin | 2012.07.02 |
| 1.5.x 사용자들 중에 IE9에서 셀렉트박스 목록이 안보일때 | 빽짱구 | 2012.06.30 |
창 엄청 커지네요...