iframe 정보를 부모 페이지로 전송하는 방법 postMessage

iframe 이란?

HTML의 iframe은 인라인 프레임을 나타냅니다. 인라인 프레임은 현재 HTML 문서 내에 다른 문서를 포함시키는 데 사용됩니다. 'src'속성은 iframe을 차지하는 문서의 URL을 지정하는 데 사용됩니다.

 

이처럼 iframe은 내 페이지에 다른 페이지를 삽입하는 tag입니다.

iframe tag를 사용하여 삽입할 수 있습니다. 속성으로써 width, height등을 줄 수 있습니다.

<iframe src="page url"></iframe>

 

document내에 다른 html document를 삽입하는데 그치지 않고 그 둘을 상호작용하게 할 수는 없을까? 이 둘사이에 정보를 주고 받을 수 있는 루트가 존재합니다 . 그것이 postMessage() 입니다.

  const handleReviewCount = () => {
    window.parent.postMessage({ message: this.state.message }, '*');
  }

이런 형식으로 부모에 메시지를 보낼 수 있습니다. 부모 document에서 스크립트로 실행할 코드를 적어줍니다.
이코드는 이벤트리스너이고 메시지 이벤트를 감지하여 그 이벤트의 데이터를 받아올 수 있습니다.

window.addEventListener("message", function(e) {
  document.getElementById("내가 지정할 요소 아이디").innerText =
  e.data.vreviewxProductReviewCount;
});

이벤트는 e.data안에 들어있고 iframe document에서 보낼 때 작성한 키로 접근 가능합니다. 이 코드는 메시지를 받아 특정 id안에 innerText로 넘겨받은 데이터를 저장해줍니다. 이런식으로의 접근이 가능하며 부모에서 자식으로 자식에서 부모로 모두 가능합니다.