react에서 popup을 시스템 popup으로 띄울수있나요?

Question

A 웹페이지에서 B 웹페이지를 iframe으로 띄우고있고
B웹페이지에서 Popup창을 띄우면 A웹페이지를 포함한 전체 창에서 popup이 나오게하고싶습니다.

지금은 reactjs-popup 이런 라이브러리를 사용하면 당연하게도 B웹페이지 창 안에서만 떠요.
alert message같은거 띄우면 브라우저에서 띄우는거기때문에 전체 창에서 뜨더라구요.

이렇게 전체창에서 띄우게끔 custom하게 alert message를 구현할 수 있을까요??

김병훈 · Answer

window의 postMessage 메서드를 이용해서, B 웹페이지에서 팝업이 필요한 순간에 A 웹페이지에서 나오도록 할 수 있을 것 같아요.
단, 이 방법은 질문자님께서 얘기해주신 B 웹페이지에서 팝업을 직접 띄우는 방식이 아니긴 합니다.

추가로 이 방식에 대해 설명해드리자면, 다음과 같습니다.
B 웹페이지에서 Popup 창을 띄워야 하는 순간에 window.parent.postMessage 메서드를 통해, B 웹페이지를 iframe을 통해 보여주고 있는 부모 window인 A 웹페이지에 나 popup을 렌더링해야겠어를 알려주게 됩니다.
ex) window.parent.PostMessage({ type: showPopup });

PostMessage를 통해 B 웹페이지에서 보낸 이벤트를 수신하기 위해서, A 웹페이지에서도 이벤트 리스너를 등록해주어야 하는데요. B 웹페이지에서 보낸 데이터의 type: showPopup 을 통해 체크가 가능할 것입니다.
ex) window.addEventListener(message, (event) => { event.data.type === showPopup && 팝업을 띄워주기 })