[JavaScript] window.open 새창으로 열기 사용법

안녕하세요, 오늘은 Javascript로 웹브라우저에서 새창으로 여는 방법에 대해서 알아보도록 하겠습니다. 웹페이지를 개발하다 보면 새 페이지로 팝업을 띄어야 하는 경우가 있습니다. 이때 사용하는 함수가 window 객체의 open()이라는 함수인데요, window.open 함수를 통해 새창으로 여는 방법에 대해서 알아봅시다.

 

1. window.open 문법

window.open(url, name, option);
window.open('팝업주소', '팝업창이름', '팝업창옵션');

 

2. window.open [ url ]

새로운 창에 보여질 주소로써 url 설정을 안 하면 (about:blank)가 뜹니다.

 

3. window.open [ name ]

새로운 창의 속성 또는 창의 위치 및 이름을 지정합니다.

- target="_blank" : 팝업을 새창에서 엽니다. target을 설정하지 않을 경우 default로 설정됩니다.

- target="_parent" : 부모창에서 팝업이 열립니다.

- target="_self" : 현재 페이지에서 팝업이 열립니다.

- target="_top" : 현재 페이지에서의 최상의 페이지에서 팝업이 열립니다.

 

4. window.open [ option ]

fullscreen : 팝업 전체화면 출력 여부 (no,yes) ( IE에서만 작동 )

toolbar : 상단 도구창 출력 여부 (no,yes)  ( IE, FireFox에서만 작동 )

scrollbars : 팝업 스크롤바 사용 여부 (no,yes) 

resizeable : 팝업창 리사이즈 가능 여부 (no,yes) ( 크롬에서는 작동 안함)

location : 메뉴 아이콘 출력 여부 (no,yes) ( Opera에서만 작동 )

menubar : 메뉴 출력 여부 (no,yes) 

width : 팝업창의 가로길이

height : 팝업창의 세로 길이

top : 창의 화면 위에서부터 팝업 위치 설정

left : 창의 화면 왼쪽에서부터 팝업 위치 설정

 

 

5. 예제

See the Pen Untitled by seo (@seungbly) on CodePen.