새 브라우저 창을 여는 window.open() 메서드

설명

window.open() 메서드는 홈페이지 이벤트, 공지사항이나 쇼핑몰 등에서 상품 정보를 크게 보여주는 등 주로 팝업창을 띄울 때 사용한다.

 

[기본형]

 

window.open(경로, 창 이름, 창 옵션)

 

- 경로

열고자 하는 새 창이나 탭에 로드할 문서의 주소를 나타낸다.

문서의 경우 미리 만들어두어서 경로를 써두거나, url을 넣어도 된다.

 

- 창의 이름(선택사항)

열려는 창이나 탭에 고유한 이름을 지정할 수 있다. 이 이름은 후에 같은 이름으로 창을 열 때 사용할 수 있다.

만약 이름을 설정하지 않으면 새로고침을 할 때마다 팝업창이 계속 나온다.

 

- 창의  옵션(선택사항)

left, top 속성을 사용해 위치를 정하거나 width, height 속성을 사용해 크기를 지정하는 등 속성을 설정할 수 있다.

만약 옵션을 설정하지 않으면 default가 target="_blank"기 때문에 새 탭으로 창을 열어버린다.

---

네이버 로그인 페이지 IP보안 팝업 예제

네이버 로그인 페이지의 IP보안 팝업을 예제로 만들어 구현해보자.

네이버 로그인 페이지

네이버 로그인 페이지 모습이다.

로그인 상태 유지 오른쪽에 IP 보안이라고 되어있는 부분을 클릭하면 아래 이미지와 같은 팝업창이 뜬다.

 

ip 보안 클릭 시 뜨는 팝업창

기존 네이버 html 구성

관리자도구로 확인해보면 상기와 같은 HTML이 작성되어 있는데 우리는 해당 문서 파일을 가지고 있지 않으므로 경로는 팝업창의 url로 수정하여 아래와 같이 작성한다.

---

구현

[HTML]

<div class="ip_check">

<a

href="https://nid.naver.com/login/ext/help_ip3.html"

target="_blank"

id="ipguide"

title="IP보안"

>

<span class="ip_text">IP보안</span>

</a>

</div>

 

이렇게 작성된 HTML을 참고하여 아래와 같이 스크립트를 짠다.

 

[JS]

const aTag = document.querySelector("#ipguide"); // a 태그 요소 잡기

const windowFeatures = "width=520,height=747"; // 창 옵션 값 변수 할당

function openPopup() {

window.open(aTag.href, "PopupWindow", windowFeatures);

// 경로 창 이름 창 옵션

}

aTag.addEventListener("click", openPopup);

 

1. document.qeurySelector() 메서드를 활용하여 a태그를 잡고 aTag 상수에 할당한다.

2. 창 옵션에 들어갈 값을 문자열로 작성하여 상수 windowFeatures에 담는다.

3. IP 보안을 클릭 시 팝업이 발생되도록 클릭 이벤트를 생성한다.

(경로가 되는 부분은 #ipguide의 href attribute에 담겨진 경로, 창 이름은 "PopupWindow", 창 옵션은 상수 windowFeatures에 담겨진 값을 활용한다