window.open()을 사용한 팝업 제어(Javascript, Ajax)

 

window의 객체 중에 하나인 open()을 사용하여 팝업창을 만들 수 있습니다. 하지만 브라우저별로 지원하는 속성이 다르니 확인하시기 바랍니다.

 

▶ 문법

window.open();

window.open(url);

window.open(url, name);

window.open(url, name, specs);

 

1. url(팝업창 주소) : 만들 팝업창의 주소를 나타내는 문자열입니다. 빈 문자열("")을 지정하거나 생략하게                                         되면 빈 페이지가 로드됩니다.

 

2. name(팝업창 이름) : 로드된 팝업창의 이름을 지정하는 문자열입니다. 기본값은 "_blank" 입니다.

     2.1.  _blank : 팝업창이 새창에서 열립니다.

     2.2.  _self : 현재 페이지에서 팝업창이 열립니다.

     2.3.  _parent : 부모창에서 팝업창이 열립니다.

     2.4.  _top : 현재 페이지의 최상의 페이지에서 팝업창이 열립니다.

     2.5.  name(사용자 설정 이름) : 같은 이름의 팝업창은 한 개의 팝업창만을 열 수 있고(같은 이름일 경우                                                            먼저 로드된 팝업창은 자동으로 close()) 여러 팝업을 로드하고 싶으면                                                              팝업마다 다른 이름을 설정하면 됩니다.

 

3. specs(팝업창 설정) : 팝업창에 설정을 부여할 수 있습니다.

    3.1. toolbar : yes/no를 통해 도구창의 출력 여부를 선택합니다.

    3.2. scrollbars : yes/no를 통해 스크롤바의 사용 여부를 선택합니다.

    3.3. menubar : yes/no를 통해 메뉴 출력 여부를 선택합니다.

    3.4. width : 픽셀 단위로 팝업창의 가로 길이를 설정합니다.

    3.5. height : 픽셀 단위로 팝업창의 세로 길이를 설정합니다.

    3.6. top: 팝업창을 화면 위에서부터 위치를 설정합니다.

    3.7. left :팝업창을 화면 왼쪽에서부터 위치를 설정합니다.

 

 

▶ 예제

 

var popup = window.open("www.tistory.com", "_self", "toolbar = yes, scrollbars = no, width = 500, hight = 400");

var popup = window.open("www.tistory.com", "tistory", "toolbar = yes, scrollbars = no, width = 500, hight = 400");