[Javascript] postMessage, addEventListener(, attachEvent)

postMessage, addEventListener(, attachEvent)를 이용한 iframe 부모와 자식간의 메시지 통신 방법

 

- iframe 메시지 통신 순서
1. 양쪽 부모, 자식 윈도우에 addEventListener를 이용해 message 이벤트 핸들러 등록
[부모 → 자식]
2. 부모 윈도우에서 자식 윈도우 iframe에 window.postMessage 이용해 메시지 전달
3. 부모 윈도우로부터 메시지를 수신받고 등록된 자식 윈도우의 addEventListener의 message 이벤트 발생시키고 함수 호출
[자식 → 부모]
4. 자식 윈도우 iframe에서 부모 윈도우에 window.parent.postMessage 이용해 메시지 전달
5. 자식 윈도우로부터 메시지를 수신받고 등록된 부모 윈도우의 addEventListener의 message 이벤트 발생시키고 함수 호출

 

- 메시지 수신

if(window.addEventListener){
	window.addEventListener("message", function, false);
}else if(window.attachEvent){
	window.attachEvent("onmessage", function );
}

• addEventListener: 이벤트 발생시 이벤트 리스너 함수를 호출
  
• attachEvent: IE 8 이하, 오페라에서 addEventListener 대신 실행
• function: message 이벤트 발생시 호출되는 함수명

 

- 메시지 송신

// 부모 => 자식(iframe)
window.postMessage(message, targetOrigin);

// 자식(iframe) => 부모
window.parent.postMessage(message, targetOrigin);

• message: key, value 형식으로 이루어진 전달할 메시지
• targetOrigin: 메시지를 수신받는 도메인 (or 문자열 "*")

 

 

- 참고문서
https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener() - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage

Window.postMessage() - Web API | MDN