반응형
MessageEvent
-
[HTML+JS] window.postMessage() - <iframe> 과의 통신Front-End(Web)/HTML, CSS 2022. 2. 24. 22:27
현재, 회사의 서비스 분리 및 병합 등이 이루어지는 과정이어서, 선배 개발자님과 통합 멤버십 페이지를 개발하고 있다. 지금은 멤버십 개발 및 QA는 마무리된 상태이며, 이를 각 서비스에 연동하는 과정이며 여기서 많은 정책의 변화가 수반되고 있다. 그 중 하나가, 서비스에서 본인인증이 필요할 시, 멤버십 본인인증 창을 외부 팝업(일종의 모달) 형태로 띄우고자 하는 것이다. 팝업을 띄우는 다양한 방법이 있겠지만, 태그를 통해 내부에 웹페이지를 삽입하는 형태를 구상했다. 이 때, 내부 페이지의 X버튼을 클릭하면 외부 페이지가 이를 인식하고 창을 닫는 로직이 필요했으며, 이를 위해 window.postMessage() 라는 브라우저 이벤트 및 리스너를 활용하게 되었다. 내부에 웹을 띄우는 방법은 다방면에서 적용..