[JavaScript] 자바스크립트 window.open() 새창 열기 기능 사용방법 & 예제

안녕하세요. 오늘은 자바스크립트 window.open()에 대해서 알아 보겠습니다. 개발을 하시면서 새창으로 열기 기능을 많이들 사용하시는데요. 자주 까먹는 기능이라 자주 쓰이는 함수 위주로 설명 드리겠습니다.

예제

1. 버튼에 'id'를 기준으로 클릭 이벤트를 선언하구 window.open()을 사용하여

네이버 홈페이지를 새창으로 띄울수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
    <script>
 
        // 네이버 바로가기
        $("#gotoNaver").click(function(){
            window.open("https://naver.com.");
        });
    </script>
</head>
    <body>
        <input type="button" id="gotoNaver" value="네이버 바로가기"/>
    </body>
</html>
 
 
 

2. 이번에는 위와 같이 window.open()을 사용하여 새로운 팝업창을 띄우지만

새로운 팝업창의 크기를 지정할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
    <script>
        // 네이버 바로가기
        $("#gotoNaver").click(function(){
            window.open("https://naver.com.", "네이버", "width=500 , height=600");
        });
    </script>
</head>
    <body>
        <input type="button" id="gotoNaver" value="네이버 바로가기"/>
    </body>
</html>
 
 
 

옵션 정리

width= 팝업창의 가로길이 숫자

height= 팝업창의 세로길이 숫자

resizable= 창변형 표시 yes or no

fullscreen= 전체화면 표시 yes or no

channelmode= 전체화면(F11) 표시 yes or no

toolbar= 단축도구창(툴바) 표시 yes or no

menubar= 메뉴창(메뉴바) 표시 yes or no

location= 주소창 표시 yes or no

scrollbar= 스크롤바 표시 yes or no

status= 아래상태바 표시 yes or no

'JavaScript' 카테고리의 다른 글

[Javascript] 제이쿼리 엘리먼트(Element) 존재 확인 사용법 & 예제 (0)	2020.09.23
[Javascript] 자바스크립트 체크박스 체크 유/무 확인방법 & 예제 (0)	2020.05.11
[ Jquery ] 제이쿼리 실시간 검색어 자동완성 ajax 통신 방법 & 예제 (2)	2020.04.03
[Javascript] 자바스크립트 while()문 사용방법 & 예제, 반복문 빠져 나오는 방법 (0)	2020.03.23
[Jquery] 제이쿼리 change 이벤트 사용방법 & 예제, change 이벤트 소스코드로 정리와 설명 (0)	2020.02.27