Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML5의 MessageChannel 및 MessagePort 개체는 무엇입니까?


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

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

이 시나리오에서는 한 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);