[javascript] 팝업창 사용

oauth 를 통해서 개인정보를 받아와야 하는페이지에서 팝업형태가 아닌 페이지 전환 이후에 받아오는 식으로 진행중이였다.

이후에 전역상태를 관리 하는 부분에서 전역상태가 페이지 전환시 제거 되기 때문에 팝업형태로 변경했다.

 

window.open(url, target, option) 형태로 팝업창을 열어 줄수 있으며

const popup = window.open()

popup.close() 를 호출하면 닫아줄수가 있다.

 

근데 이걸 부모창에서 제어해야했었다.

그래서 팝업창에서 원하는 작업을 완료한 이후에 window.postMessage 를 통해서 팝업창에서 부모의 창으로 이벤트메시지를 보내주었다.

window.opener.postMessage({ oautData }, '*'); 

해당메서드르 사용해서 부모의 창에 메시지를 보낼수 있고

 

부모의 페이지에는 

window.addEventListener('message', func , false); 의 형태로 메시지 이벤트를 받아서 처리 해줄수 있었다.

그래서 해당 이벤트를 처리하는 함수에서 popup.close() 를 호출 해주면 되었다.

 

https://dev-handbook.tistory.com/44