Javascript - 부모 창에서 window.open()으로 연 자식 창 관리

javascript에서 window.open(url)을 사용하면 현재 부모창에서 새로운 페이지를 열 수 있다.

window.open([URL 또는 html 파일명], [자식 창의 접근자 이름], [자식 창의 스타일])

 

예를 들어, 다음과 같은 방식으로 사용하면 된다.

window.open('https://www.naver.com/', 'naverView', 'width: 240px, height: 400px');  // 해당 url을 새로운 탭에서 엶
window.close();  // 해당 창을 닫음

 

SNS 로그인 등을 구현할 때 새 창을 띄워서 권한 승인을 받는 경우가 많은데, 이 때 해당 창이 닫힌 여부를 판단하여 이벤트를 발생시키고 싶다면?

 

window.open() 함수가 window 객체를 반환하기 때문에 이 점을 이용하면 해당 창이 닫혔을 때 부모 창에서 이벤트를 발생시킬 수 있다.

 

아래 코드처럼 window.open() 자체를 변수 값으로 할당하여 해당 변수에 beforeunload 이벤트를 할당하면 창을 새로고침하거나 닫기 버튼을 눌러서 닫았을 때 실행된다.

 

하지만 window.close() 등의 함수를 통해 창을 닫은 경우에는 beforeunload 이벤트를 감지할 수 없기 때문에 이런 경우에는 unload 이벤트를 사용하면 된다.

다만... 내가 짠 코드에서는 이상하게 unload를 이용하여 window.close()를 잡아내면 해당 이벤트가 2번 실행된다... 왜일까...

const loginPopup = window.open('https://www.naver.com/');
loginPopup.addEventListener('beforeunload', () => {
   console.log('여기에 실행하고 싶은 코드를 작성하면 된다능...쿰척');
});

const loginPopup = window.open('https://www.naver.com/');
loginPopup.addEventListener('unload', () => {
   console.log('5252...나는 window.close()도 잡아낼 수 있다구..~');
});

 

나는 github OAuth를 이용하여 로그인을 구현할 때 새 창에서 access token을 발급받아 DB 데이터와 대조한 후, 일치하는 유저가 있을 경우 session에 user id를 저장하고 새 창을 닫고 메인 화면으로 이동시키는 기능을 만들 때, 위 방법을 이용하여 창 닫기를 감지하여 로그인 성공/실패 메시지를 출력하고 메인 화면으로 이동하게끔 해줬다!

 

아래는 내가 구현한 코드 일부다.

 

먼저, 라우터에서 로그인 처리(oauth token 비교 + 유저 정보 조회)가 완료되면 res.send() 내에 window.close() 코드를 작성해서 새 창이 닫히도록 했다.

그나저나 이렇게 코딩해도 될까..?

 

그 후, 프론트앤드에서 unload 이벤트에 로그인 성공/실패 여부를 출력하는 메시지를 띄우고 열려 있는 모든 화면을 닫는 코드를 할당했다.

 

 

그럼 새롭게 열린 자식 창에서 부모 창으로 값을 전달하고 싶을 때는 어떻게 해야 할까?

 

자식 창에서 부모 창을 가리키는 변수인 opener를 사용하여 값을 전달하면 된다.

// 자식 창에서 부모 창으로 값 전달
window.opener.addMenuHide();  // 부모 창의 함수인 addMenuHide 실행
window.opener.document.querySelector('.return-val').value = '1234';  // 부모 창의 Element value 값 변경
window.close();