window.open() 팝업창 구현하기 :: 마이구미

이 글은 widnow.open() 을 통해 새 페이지를 띄우는 팝업창을 다뤄본다.

팝업창은 여러 상황에서 따라서 메인 페이지와 통신하기도 하고, 어떤 시점 닫아야하기도 한다.

이러한 방식을 위한 구현, 주의사항, 웹앱 이슈 등을 알아본다.

 

우선 여기서 말하는 팝업창은 팝업이라는 용어와 비교하겠다.

팝업은 같은 창에서 단순히 div 태그를 absolute 형태로 보여지는 형태이다.

팝업창은 같은 창이 아닌 새로운 창을 의미한다.

 

 

위 이미지처럼 서로 다른 창으로 존재한다.

이렇게 새로운 팝업창을 띄우는 경우는 다음으로 나열할 수 있다.

 

• SNS 로그인
• 본인인증 모듈창
• 다른 페이지 or 다른 도메인의 페이지가 필요할 경우.

 

자바스크립트에서는 window.open() 을 통해 이를 구현할 수 있다.

 

// 기본 예제
window.open(url);

// 파라미터 활용
const options = 'top=10, left=10, width=500, height=600, status=no, menubar=no, toolbar=no, resizable=no';
window.open(url, '_blank', options);

 

그리고 대부분의 경우 새로운 팝업창을 띄우는 경우에는 2가지 작업을 추가적으로 한다.

팝업창이 로그인 페이지라고 가정해본다.

 

1. 로그인이 성공적으로 완료되었다는 것을 기존 페이지에게 알리기
2. 팝업창 닫기

 

여기서 부모창과 자식창이라는 용어를 넣어 설명하겠다.

기존 페이지와 그 위에 새로운 팝업창이 존재한다.

기존 페이지를 부모창, 팝업창을 자식창이라고 정의하겠다.

 

1번의 의미는 결국 자식창에서 부모창으로 로그인 성공을 알리는 것이다.

부모-자식간의 연결 고리는 window.opener 를 통해 할 수 있다.

window.opener 는 window.open() 을 사용한 페이지를 참조한다. 

즉, window.opener 는 부모창을 참조하고 있다.

 

// form 요소에 접근해서 제출 메소드 호출
window.opener.document.getElementById('form').submit();

// 글로벌 함수 호출
window.opener.window.store.completedLogin();

 

위와 같이 직접 부모의 DOM 에 접근하거나 선언된 함수를 호출할 수 있다.

그리고는 팝업창의 역할이 모두 완료되었으니 닫아주는 행위를 하게 된다.

이를 위해서는 window.close() 를 통해 할 수 있다.

window.close 메소드는 window.open() 으로 통해 열린 페이지일 경우에만 동작된다는 것을 인지해야한다.

* 현재 페이지에서 개발자도구 콘솔창에서 아무리 window.close() 를 실행해봐도 아무 동작이 일어나지 않는 것을 확인할 수 있다.

 

window.close();

 

제공되는 opener. close 의 공통점은 window.open() 과 밀접한 관계가 있다.

open() 통해서 열린 창에서만 동작한다는 것을 염두해야한다.

 

그 외 이슈

웹뷰를 기반으로 제공되는 웹앱의 경우에는 별도의 작업이 필요하다.

별도 작업이 없다면 window.open() 을 호출하면 앱에서는 외부 브라우저로 열어준다.

이렇게 되면 부모-자식 관계를 추정할 수 없게 되어 opener, close 를 사용할 수 없게 된다.

 

네이티브 앱에서는 window.open() 호출 되면 외부 브라우저가 아닌 새로운 팝업창을 위한 웹뷰를 하나 더 생성해서 사용하면 부모-자식 관계를 맺어줄 수 있게 된다.

 

---

 

잘못된 내용이 있거나 오해하고 있는 내용이 있으면 댓글로 남겨주세요!