[JavaScript] iframe 부모 - 자식 메시지 전송 Window.postMessage()

iframe 을 사용하면서

부모와 자식 간 데이터 공유를 위한 방법으로 postMessage를 사용해봤다.

 

0. 기본문법

targetWindow.postMessage(message, targetOrigin, [transfer]);
targetWindow.postMessage(보내질 메시지, 문자열 "*" 혹은 URI, 객체(생략가능));

//예시
window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
  if (event.origin !== "http://example.org:8080") return;

  // ...
}

• targetWindow: 메시지를 받을 창 (예: iframe.contentWindow 또는 parent).
• message: 전달할 데이터. 일반적으로 문자열이나 객체 형태.
• targetOrigin: 메시지를 받을 창의 출처 (예: "http://example.com"). 모든 출처에 메시지를 보내려면 "*"를 사용.
• [transfer]: 전송할 객체의 소유권을 이전하는 데 사용 (옵션).

 

1-1. 부모 창에서 자식 iframe 에 postMessage 

    <script>
        function sendMessageToIframe() {
            var iframe = document.getElementById('myIframe'); 
            iframe.contentWindow.postMessage('Success', '*'); 
            //자식 창으로 Success 메시지를 보냄
        }
    </script>

1-2. 자식창에서 메시지 수신

<script>
    window.addEventListener('message', function(event) {
                if (event.data === 'Success') {
                    // Success 를 받아온 경우 처리
                } 
    });
</script>

 

2-1. 자식 iframe 창에서 부모 창에 postMessage 

    <script>
        function sendMessageToParent() {
            parent.postMessage('Good', 'http://example.com');
            //부모 창으로 Good 메시지를 보냄
        }
    </script>

2-2. 부모 창에서 메시지 수신

<script>
    window.addEventListener('message', function(event) {
        if (event.origin !== 'http://example.com') {
            return; // 메시지를 보낸 창의 출처가 http://example.com인지 확인
        }
    });
</script>

 

 

더 자세한 내용은 아래 참조>>

Window.postMessage() - Web API | MDN