window.postMessage 로 윈도우 컨트롤 하기

 

 

<요구 사항> 

순수 js 로 작업한 A 윈도우에서 어떤 메뉴를 클릭하면 a 다이얼로그가 출력되는데,

a 다이얼로그 안에 있는 확인 버튼(okBtn)을 클릭하면 B 윈도우가 팝업으로 열린다. 

(이때 B윈도우는 리액트로 작업한 부분)

A 윈도우의 a 다이얼로그에는 취소 버튼(closeBtn) 도 있는데, 취소 버튼을 클릭하면 B 윈도우가 닫혀야 한다.

그런데 B가 윈도우 팝업이라 다른 탭에 그대로 남아있어서 해당 부분을 취소 버튼 클릭 시 자동으로 닫히게 수정해야 했다.

 

처음에 검색하면서 크롬 내에서는 도메인이 다른 윈도우를 닫을 수 없다는 글을 봤었는데, 그 때문에 혼란이 와서 해결할 방법이 과연 있는건지 몇 시간을 고민했다 ㅠㅠ 순수 js 기반 윈도우 내에서 리액트 윈도우를 컨트롤 할 수 있는지도 모르겠고.. 멘붕이었다. 다행히 협업한 다른 팀 담당자분께 문의해보니 postMessage 를 사용하면 된다고 알려주셔서 그걸 이용해서 순수 js 윈도우와 리액트 윈도우를 연결할 방법을 찾을 수 있었다. 순수 js 와 리액트 윈도우를 연결하는 건 성공했는데, 이제는 서로 다른 윈도우를 컨트롤 하는 부분이 문제였다. 아무리 생각해도 답이 안나와서 과장님께 여쭤보니, 오픈한 윈도우 객체 자체를 넘겨받아서 닫아주면 가능하지 않을까 라는 이야기가 나와서 그 방법을 시도해보았다.

 

순수 js 로 작업된 A 윈도우에서 closeBtn 을 클릭하면 실행되는 다이얼로그 닫는 함수 내에 아래 코드를 넣었다.

B 팝업을 개발하기 위해 작업한 리액트 모듈에 message를 보내고, 해당 모듈에서 그 message 를 인식하면 B 팝업이 닫히도록 설정했다.

 

A 윈도우에서 보낸 message 를 받아서 message data 가 close 인지 확인 후 B 윈도우 객체를 close 한다.

아래 코드에서 windowObject 는 B 윈도우 객체다.

 

 

위와 같이 window open 하는 함수 내에서 윈도우 객체를 반환해주고, 그 값을 그대로 가져와서 close 하니 깔끔하게 해결 가능했다!!

 

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."