팝업 창과 통신하는 방법

1. window를 알아보자

팝업 창과 통신하려면, window 개념을 알아야한다. MDN에 나와있는 window 설명을 가져오자면 이렇다.

Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다. document 속성이 창에 불러온 DOM 문서를 가리킵니다.

주어진 문서의 창은 document.defaultView를 사용해 접근할 수 있습니다.

현재 스크립트가 작동 중인 창을 나타내는 전역 변수 window를 JavaScript 코드에서 접근할 수 있습니다.

자 우리가 지금 보고 있는 창이 window 객체라고 생각하면된다.

지금 이 창의 개발자 도구를 열어서 콘솔에 window라고 쳐보자. 만약 크롬이라면, 현재 window객체를 반환할 것이다.

자, 이제 팝업 창과 통신하는 방법을 보여주기 전에, 왜 팝업 창과 통신하는 방법을 알아야하는 지 알아보자.

2. 실무에서의 예시

예시로 29cm 로그인을 들겠다. 내가 정말 잘 만들었다고 생각하는 좋아하는 웹사이트이다.

29cm 로그인 페이지에서 애플 로그인을 누르면 다음과 애플 로그인 팝업 창이 같이 뜬다. 이 때 프런트엔드 초보자라면 이런 의문을 가져야한다.

3. 부모 window와 자식 window

로그인 창은 부모 window라고 부르고, 팝업 창은 자식 window라고 하자. 내가 정했지만, 원래 다들 이렇게 부른다. 마치 부모 프로세스에서 fork하여 생긴 프로세스를 자식 프로세스라고 하듯이 이렇게 부른다.
자, 개발자 도구를 키고 자식 window를 띄워보자.

const babyWindow = window.open("http://jikang42.com/", "_blank", "menubar=no, toolbar=no, width=800, height=800");

이 페이지에서 콘솔을 열어서 해야한다. 안 그러면 CORS 에러가 난다.

이걸 직접 열어봐야 다음 단계로 Smooth하게 연결되니 꼭 열어보기 바란다.

4. 부모 window가 자식 window을 제어하는 방법

자 이제 부모 window에서 이렇게 쳐보자.

babyWindow.alert('부모 window가 자식 window에게 alert하라고 쓰는 메시지를 그대로 보여준다');

이제 제대로 했다면, 팝업에 다음과 같이 alert가 뜰것이다.

5. 자식 window가 부모 window을 제어하는 방법

자 이제 자식 window(팝업)에서 개발자 도구를 열어서 다음과 같이 해보자.

window.opener.alert('자식이 부모에게 보내는 alert 메시지');

이 때, window.opener 코드는 자신을 팝업으로 띄운 부모 window 객체를 반환한다.

6. 결론

자, 이런 식으로 부모 window와 자식 window 통신에 대해서 알아보았다. 나중에 실무에서 요구를 받을 때 당황하지 않았으면 한다.