HTML5의 브라우징 컨텍스트 간의 양방향 통신

브라우징 컨텍스트 간의 양방향 통신을 채널 메시징이라고 합니다. 여러 출처 간의 통신에 유용합니다.

messageChannel을 생성하는 동안 내부적으로 2개의 포트를 생성하여 데이터를 보내고 다른 브라우징 컨텍스트로 전달합니다.

• postMessage() − 메시지 전송 채널 게시
• 시작() − 데이터를 보냅니다.
• 닫기() - 포트를 닫습니다.

이 시나리오에서는 한 iframe에서 다른 iframe으로 데이터를 보내고 있습니다. 여기서 우리는 함수에서 데이터를 호출하고 데이터를 DOM에 전달합니다.

var loadHandler = function(){
   var mc, portMessageHandler;
   mc = new MessageChannel();
   window.parent.postMessage('documentAHasLoaded','https://foo.example',[mc.port2]);
   portMessageHandler = function(portMsgEvent){
      alert( portMsgEvent.data );
   }
   mc.port1.addEventListener('message', portMessageHandler, false);
   mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);