[JavaScript] Window.postMessage()

window.postMessage() 메소드는 Window 오브젝트 사이에서 안전하게
cross-origin 통신을 할 수 있게 해준다.
예시로, 페이지와 생성된 팝업 간의 통신이나,
페이지와 페이지 안의 iframe 간의 통신에 사용할 수 있다.
또 데이터를 보내는 HTTP 요청을 생성하지 않으며, DOM 기반 통신에 사용된다.

위의 내용처럼 postMessage() 메소드를 통해 parent -> child 또는 child -> parent로의 메세지 전송을 할 수 있다.

 

1) 기본 사용법

1-1) 메시지 보내기

window.postMessage( data, [ports], targetOrigin );

• data : 전달할 메시지 ( string )
• ports : 메시지 포트(생략 가능)
• targetOrigin : 메시지를 수신받는 도메인. 특정 도메인이 아니라면 * 로 지정

 

1-2) 메시지 받기

window.addEventListener( 'message', function( e ) {
     // e.data가 전달받은 메시지
     console.log(e.data);
} );

• e.data : 전달받은 메시지
• e.origin : 송신자의 도메인

 

2) 부모가 자식 window에 메시지 전달

부모

<button id="btn">메시지 전송</button>
    .
    .
    .
btn.addEventListener('click', function(e) {
    var child = document.getElementById("childWindow");
    child.contentWindow.postMessage("부모->자식 전송", "*");
});

 

자식

window.addEventListener('message', function (e) {
    console.log(e.data); // "부모->자식 전송" 출력
});

 

 

3) 자식이 부모 window에 메시지 전달

부모

window.addEventListener('message', function (e) {
    console.log(e.data); // "자식->부모 전송" 출력
});

 

자식

<button id="btn">메시지 전송</button>
    .
    .
    .
btn.addEventListener('click', function(e) {
    window.parent.postMessage(("자식->부모 전송", "*");
});

 

 

[reference]
https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage
http://blog.302chanwoo.com/2016/08/postmessage/