[React.JS] 자식창에서 부모창 호출하기.

보통 자식창에서 작동하는건 iframe태그 안에서 호출하는데,

도메인이 다른 사이트에서 부모창의 이벤트를 관리해줘야 하는 부분이 생겼다.

 

팝업 자식창을 호출하는데 있어 흔하게 사용하는

window.open(url, '이름', '옵션);

을 사용했다.

 

해당하는 자식창에 부모함수를 호출을 어떻게 하나 했는데, 아주 좋은 글이 있어서 해당 글을 참조했다.

window.opener는 맞는데, 그 이후 window.opener.document 등등 적혀있어 죄다 작동이 안된다.

cors 오류 뿜뿜...

 

CORS 문제로 인해서 아래의 링크를 참조.

 

// 자식창에서 코드 인입.

        window.opener.postMessage({code:'event'}, 'domain주소');
        // 난 1번라인의 코드로 수정해서 사용했다.
        window.opener.postMessage({code:'event'}, "*"); 
        // 샘플 코드에 적힌 *은 사용하지 말것. 모든 주소 해제라 해킹에 취약해짐.

// 부모 창에서 코드 추가

const receiveMessage = async (e) =>
        {
          if(e.data.hasOwnProperty('code')){
           	console.log(e)
          }
        }
        

window.addEventListener("message", receiveMessage, false);

해당 부분 "부모창에서 자식창의 event를 받는 코드 (선언한 함수가 window.addEventListner보다 위에 있어야 한다.)"

이부분이 진짜 중요. 안그러면 코드 인식 불가.

 

https://kauboy.tistory.com/26

[JS] window.postMessage

 

그런데, addEventlistener로 자식에서 호출하니 해당 창에서 React console.log가  5번씩 찍힘-_-;;; 어쩔...