[Javascript] iframe에서 상위 ↔ 하위 간 통신을 해보자

 

 

 

같은 도메인이라면 contentWindow를 사용하고 다른 도메인이면 postMessage를 사용하면 된다.

 

 

 

1. window.postMessage()

오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 한다. 페이지와 생성된 팝업 간의 통신이나 페이지와 페이지 안의 iframe 간의 통신에 사용할 수 있다. 다른 페이지 간의 스크립트는 각 페이지가 같은 프로토콜, 포트 번호, 호스트를 공유하게 있을 때에만 접근할 수 있다. postMessage는 이 제약 조건을 안전하게 우회하는 기능을 제공한다.

postMessage(message)
postMessage(message, options)
postMessage(message, targetOrigin)
postMessage(message, targetOrigin, transfer)

 

 

✨ 문법

targetWindow.postMessage(message, targetOrigin, [transfer]);

•  targetWindow: 메세지를 전달받을 window의 참조이다.
  • [HTMLIFrameElement].contentWindow: 부모 window에서 임베디드 된 iframe을 참조할 때
  • Window.opener: 새 창을 만든 window
  • Window.parent: 임베디드 된 iframe에서 부모의 window를 참조
  • Window.frames: 현재 윈도우에 존재하는 iframe 목록
• message: 다른 window에 보내질 데이터로 직렬화해서 보내기때문에 이를 직접 직렬화 할 필요는 없다.
• targetOrigin: targetWindow의 origin을 지정한다. 문자열 '*'는 별도로 지정하지 않음을 의미한다. 스키마, 호스트 이름, 포트가 적확해야 한다. 특정한 대상을 지정하지 않으면 악의적인 사이트에 데이터가 공개될 여지가 있으므로 사용에 주의한다.

 

✨ 메세지 주고받기

// 메세지 주기
popup.postMessage('Hello', 'http://example.com');

// 메세지 받기
window.addEventListener('message', (event) => {
  if (event.origin !== 'http://example.com') {
    return;
  }
  
  // 메시지를 받으면 메시지를 보낸 쪽에 'World!' 데이터를 보낸다.
  event.source.postMessage('World!', event.origin);
}, false);

 

 

 

2. 프레임 간 접근하기

📡 부모 → 자식

// 접근하기
document.getElementById("iframe").contentWindow.document.getElementById("접근하려는 요소")
document.getElementById("iframe").contentDocument.getElementById("접근하려는 요소")
window.frames['아이프레임아이디'].document.getElementById('접근하려는 요소')

// 함수 호출하기
document.getElementById("iframe").contentWindow.함수명()

 

 

📡 자식→ 부모

// 부모 함수 호출 시
parent.함수명()

 

 

 

 

---

출처

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

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage