JS | 자식창에서 메세지 발신, 부모창에서 메세지 수신하기

 

가끔 팝업창에서 작업을 마치고, 

팝업창은 끄고 자식창의 메세지를 받아 부모창에서 작업을 마저 해야할 때가 있다.

이럴 때 사용하면 좋은 게 postMessage 메서드다.

 

---

postMessage('전달할 데이터', '자식창URL');

 

postMessage() 메서드는 웹 페이지 간에 안전하게 데이터를 전송하는 데 사용된다.

이 메서드를 사용하면 다른 창, 프레임 또는 워커(worker)에 메시지를 보낼 수 있다.

이 메서드는 두 가지 주요 매개변수를 사용한다:

message: 전송하려는 데이터. 문자열, 객체 등 어떤 데이터든 전달할 수 있다.
targetOrigin (선택적): 메시지를 받을 대상 창의 출처(origin)를 지정.

이는 보안상의 이유로 설정되며, 이 값이 설정되면 특정 출처에서만 메시지를 수신한다.

기본적으로 '*'를 사용하면 모든 출처에서 메시지를 수신할 수 있다.

 

 

 

 

---

예제코드

자식창

// 현재 창 닫고 부모 창에 true 반환
window.close();
window.opener.postMessage(true, '*');

 

 

부모창

// 부모 창에서 메시지 수신
window.addEventListener('message', function(event) {
    // event.data에 전달된 데이터가 있음
    var receivedData = event.data;
    
    // 받은 데이터 처리
    if (receivedData === true) {
        // 받은 데이터가 true인 경우 처리
        console.log('부모 창에서 받은 데이터는 true입니다.');
        // 원하는 작업 수행
    }
    // 다른 조건에 따른 처리 가능
});