iframe으로 삽입된 자식 페이지에서 부모 창(parent window)으로 메시지를 전달하려면 HTML5의 postMessage API를 활용해야 합니다. 이 방식은 서로 다른 도메인 간에도 안전하게 통신할 수 있도록 지원하는 웹 표준 기술입니다.
부모 창에서 메시지 수신하기
window.parent 객체는 자식 iframe 내부에서 최상위(부모) 창을 참조할 때 사용됩니다. 아래 코드는 부모 쪽에 작성되며, 자식 iframe이 3초마다 부모 창으로 메시지를 전송하도록 하는 예제입니다. 별도의 초기 메시지 없이도 바로 동작합니다.
var a = window.addEventListener ? "addEventListener" : "attachEvent"; // a: 이벤트 등록 메서드
var b = window[a]; // b: 실제 이벤트 등록 함수
var c = a == "attachEvent" ? "onmessage" : "message"; // c: 이벤트 이름
// 자식 창에서 오는 메시지 수신
b(c, function(e) {
var d = e.message ? "message" : "data"; // d: 데이터가 담긴 키
var f = e[d]; // f: 실제 전달된 데이터
}, false);
코드 핵심 요소 설명
- a: 브라우저 환경에 따라
addEventListener(표준) 또는attachEvent(구형 IE) 중 사용 가능한 이벤트 등록 메서드를 선택합니다. - b: 선택된 이벤트 등록 함수 자체입니다.
- c:
attachEvent를 사용하는 경우 이벤트 이름 앞에 "on" 접두사가 필요하므로onmessage, 그 외에는message를 사용합니다. - d: 이벤트 객체에서 데이터가 저장된 속성명입니다. 구형 IE에서는
e.message, 표준 브라우저에서는e.data를 사용합니다. - f: 실제로 전달된 메시지 데이터입니다.
자식 창에서 메시지 전송하기
자식 iframe 쪽에서는 setInterval과 parent.postMessage를 조합하여 3초마다 부모 창으로 메시지를 전송할 수 있습니다.
setInterval(function() {
var msg = "자식 → 부모 메시지";
window.parent.postMessage(msg, "*"); // 실제 서비스에서는 특정 origin 지정 권장
}, 3000);
브라우저 호환성 참고 사항
구형 Internet Explorer(IE8 이하)는 addEventListener 대신 attachEvent를 사용하며, 이벤트 이름 앞에 "on" 접두사를 붙여야 합니다. 위 코드는 이러한 차이를 모두 처리하도록 작성된 크로스 브라우저 호환 코드입니다. 또한 데이터 속성명 역시 브라우저마다 다르므로(message vs data) 두 가지를 모두 확인하는 것이 안전합니다.
보안 관련 주의사항
postMessage 사용 시 대상 origin을 *로 지정하면 어떤 창이든 메시지를 받을 수 있습니다. 실제 운영 환경에서는 반드시 정확한 도메인을 명시하고, 수신 측에서도 e.origin 값을 검증하여 신뢰할 수 있는 발신자인지 확인하는 것이 좋습니다.