IFRAME과 메시지 전달

window.postMessage를 이용하면 iframe안의 페이지와 메시지를 주고 받을 수 있다.

iframe의 도메인이 다른 경우에도 사용할 수 있으며 IE8에서도 사용이 가능하다고 되어있으나 안되는 경우가 종종 있는 것 같다. ( http://caniuse.com/#search=postMessage );

메시지 송신

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

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

메시지 수신

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

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

예시 )

1. 부모가 자식 iframe에 메시지 전달

부모 HTML ( 메시지 전송할 버튼과 Iframe 생성 )

 <button id="btn">자식에게 메시지 전송</button>
<iframe id="child" src="/lab/postMessage/child.html" width="100%" height="300px" frameborder="0"></iframe>

부모 javascript ( 자식 Iframe에 메시지 전달 )

var btn = document.getElementById( 'btn' );       // 메시지 전송 버튼
var child = document.getElementById( 'child' );   // iframe

// 버튼 클릭하면 메시지 전달 함수 호출
btn.addEventListener( 'click', function( e ) {
    sendMsgToChild( '아들! 딸!' );
});

// 자식에게 메시지 전달
function sendMsgToChild( msg ) {
    child.contentWindow.postMessage( msg, '*' );
}

부모로부터의 메시지를 수신하는 EventListener 등록한다.  postMessage 함수는 window 객체에 접근해서 실행해야 하는데 iframe의 window에 접근하려면 contentWindow를 사용하여야 한다. contentWindow 속성은  iframe 에 의해 생성된 Window 객체를 말한다.

자식 Iframe의 javascript ( 부모로부터 메시지 수신 )

window.addEventListener( 'message', receiveMsgFromParent );
// 부모로부터 메시지 수신
function receiveMsgFromParent( e ) {
    // e.data가 전달받은 메시지
    console.log('부모로 부터 받은 메시지 ', e.data );
}

2. 자식 iframe이 부모에게 메시지 전달

부모 javascript ( 자식으로부터 메시지 수신 )

// 메시지 수신 받는 eventListener 등록
window.addEventListener( 'message', receiveMsgFromChild );

// 자식으로부터 메시지 수신
function receiveMsgFromChild( e ) {
    console.log( '자식으로부터 받은 메시지 ', e.data );
}

자식 Iframe의 HTML ( 전송 버튼 생성 )

 <button id="btn">부모에게 메시지 전송</button>

자식 Iframe의 javascript ( 부모에게 메시지 전달 )

var btn = document.getElementById( 'btn' );

btn.addEventListener( 'click', function( e ) {
    sendMsgToParent( '엄마! 아빠!' );
});

// 부모에게 메시지 전달
function sendMsgToParent( msg ) {
    window.parent.postMessage( msg, '*' );
}

자식 iframe에서 window.parent는 부모의 window 객체이다.

전체 source