꾸준히 공부하는 개발자

[JS] window.postMessage 본문

Javascript

[JS] window.postMessage

kauboy 2020. 2. 7. 13:49

자식창에서 로그인하여 부모창으로 query를 날려야 할 일이 발생하였다.

window.opener 와 window.postMessage를 이용하여 event를 발생하여 해결하였다.

 

자식창에서 부모창으로 event를 날리는 코드

window.opener.postMessage({code:locationQuery.code}, '*')

 

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

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

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

 

이 방법을 이용하여 Front에서 cafe24 인증을 해결할 수 있었다.

 

참고: https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage

 

Window.postMessage()

window.postMessage() 메소드는 Window 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 합니다. 예시로, 페이지와 생성된 팝업 간의 통신이나, 페이지와 페이지 안의 iframe 간의 통신에 사용할 수 있습니다.

developer.mozilla.org

 

Comments