JS - open() 객체

새로운 윈도우 창을 만들고, 열고, 닫고, 크기를 조절할 수 있는 메서드는 다음 표를 통해 윈도우를 제어할 수 있습니다.

window.open(URL, name, specs, replace)

메서드	설 명
open()	새로운 윈도우 창을 만듭니다.
close()	윈도우 창을 닫습니다.
moveBy(x, y)	현재 위치에서 브라우저를 지정한 픽셀만큼 이동. 상대좌표로 하며 양수나 음수가 될 수 있음.
moveTo(x, y)	윈도우 왼쪽 상단 모서리에서 지정한 픽셀만큼 이동 절대좌표로 하며 양수나 음수가 될 수 있음.
resizeBy(x, y)	현재 윈도우 창 크기에서 x, y 만큼 크기를 재설정 상대좌표로 하며 양수나 음수가 될 수 있음
resizeTo(x, y)	윈도우 창을 x, y 크기로 설정 절대좌표로 하며 양수나 음수가 될 수 있음
scrollBy(x, y)	현재 위치에서 스크롤을 지정한 픽셀만큼 이동. 상대좌표로 하며 양수나 음수가 될 수 있음.
scrollTo(x, y)	스크롤을 왼쪽 상단 모서리에서 지정한 픽셀만큼 이동. 절대좌표로 하며 양수나 음수가 될 수 있음.

open() 에 사용할 수 있는 속성은 다음과 같습니다.

속 성	설 명
URL	페이지 URL. 선택사항
name	윈도우를 새 창으로 보여줄지, 현재 창에 보여줄지를 설정. 선택사항입니다. _blank : 새 창으로 보여줌(기본 값) _self : 현재 창에 보여줌 _parent : 프레임을 사용할 경우 한 단계 상위 프레임에 보여줌 _top : 프레임을 사용할 경우 가장 상위 프레임에 문서를 보여줌 name: 윈도우의 이름을 지정
specs	쉼표를 구분해서 다음 값을 여러 개 지정할 수 있습니다. directories: 윈도우의 연결도구모음. (IE 전용)   Yes | no | 1 | 0 중 하나. 기본값 yes location: 윈도우 주소 입력창의 활성화 여부. (오페라 전용)   Yes | no | 1 | 0 중 하나 menubar: 윈도우의 메뉴표시줄 표시여부.   Yes | no | 1 | 0 중 하나 resizable: 윈도우 창 크기를 재조절할 수 있는지 여부. . (IE 전용)   Yes | no | 1 | 0 중 하나 scrollbar: 윈도우의 스크롤바 표시여부. (IE, Firefox, Opera 전용)   Yes | no | 1 | 0 중 하나 status: 윈도우의 상태 표시줄 표시 여부.   Yes | no | 1 | 0 중 하나 toolbar: 윈도우의 툴바 표시여부. (IE, Firefox 전용)   Yes | no | 1 | 0 중 하나 width: 윈도우 창의 너비. (픽셀 단위) height: 윈도우 창의 높이. (픽셀 단위) top: 윈도우의 상단 스크린 위치. (픽셀 단위) left: 윈도우의 왼쪽 스크린 위치. (픽셀 단위)
replace	새로운 브라우저 창을 만들 때의 URL을 주소 히스토리에 기록할지를 결정 true | falae 중 하나. 이전 페이지 기록을 남기지 않으려면 true로 설정하세요.

버튼을 클릭하면 가로/세로 크기 200(px)인 윈도우 창을 만드는 예제를 만들어 보겠습니다.

<button onclick="win_open()">새창 열기</button>

<script>
function win_open() {
  var win = open("", "child_window", "width=200, height=200");
  win.document.write("<h4>안녕하세요. 반갑습니다.</h4>");

  win.document.write("<button onclick='window.close()'>
                                      창닫기</button>");
}
</script>

<script>
onload = function() {
 win = open("", "", "width=200, height=200, scrolbars=yes");
 win.document.write("<h4>안녕하세요.</h4>");

 // 1초 후
 setTimeout(function(){
   // 스크린의 상단/왼쪽에서 100(px) 만큼 이동합니다.
   win.moveTo(100, 100);

     // 1초 후
     setTimeout(function(){
       // 윈도우 창 크기를 가로/세로 500(px)로 변경합니다.
       win.resizeTo(500, 500);

         // 1초 후
         setTimeout(function(){
           // 아래 메시지를 보냅니다.
           win.document.write("<p>감사합니다.</p>");
           win.document.write("<p>또 오세요~!</p>");
           win.document.write("<button onclick='window.close()'>
                                              창닫기</button>");
         }, 1000);
     }, 1000);
 }, 1000);
}
</script>