0songha0

postMessage 통신 방법 / 부모창, 자식 팝업 간 데이터 전달 방법

postMessage 통신 시, 별도의 CORS 설정은 필요하지 않습니다.

부모창 → 자식 팝업 메시지 전송 방법

부모창에서 postMessage 전송

// 자식 팝업 열기
const popup = window.open("http://자식팝업IP:포트/팝업페이지경로?파라미터=값", "_blank");

// 자식 팝업에 postMessage 보내기
setTimeout(() => {
  popup.postMessage({ message: "메시지 값" }, "http://자식팝업IP:포트");
}, 500);

부모창에서 자식 팝업으로 postMessage 전송 방법입니다.

자식 팝업에 메시지 수신 이벤트 리스너 작성

window.addEventListener("message", (event) => {
  // 부모창 origin 확인 필수
  if (event.origin !== "http://부모창IP:포트") {
    return;
  }

  if (event.data.message === '메시지 값') {
    console.log("부모창에서 받은 메시지 : ", event.data.message);
  }
});

자식 팝업에 부모창 메시지 수신 이벤트 리스너를 작성해두면 postMessage를 받을 수 있습니다.

자식 팝업 → 부모창 메시지 전송 방법

자식 팝업에서 postMessage 전송

// 부모창에 postMessage 보내기
opener.postMessage({message : '메시지 값'}, "http://부모창IP:포트");
또는
opener.postMessage({message : '메시지 값'}, "*"); // 모든 도메인 허용 : 테스트 시 사용

자식 팝업에서 부모창으로 postMessage 전송 방법입니다.

부모창에 메시지 수신 이벤트 리스너 작성

window.addEventListener("message", (event) => {
  // 자식 팝업 origin 확인 필수
  if (event.origin !== "http://자식팝업IP:포트") {
    return;
  }

  if (event.data.message === '메시지 값') {
    console.log("자식 팝업에서 받은 메시지 : ", event.data.message);
  }
});

부모창에 자식 팝업 메시지 수신 이벤트 리스너를 작성해두면 postMessage를 받을 수 있습니다.

최신 글