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

iframe 이란?

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

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

<iframe src="page주소"></iframe>

iframe tag를 사용하여 삽입할 수 있습니다. 속성으로써 width,height등을 줄 수 있다 자세한 것은 w3s등을 참고하길 바랍니다.

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

그것이 postMessage() 이다.

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

이런 형식으로 부모에 메시지를 보낼 수 있다.

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

부모 document에서 스크립트로 실행할 코드를 적어준다.
이코드는 이벤트리스너이고 메시지 이벤트를 감지하여 그 이벤트의 데이터를 받아올수 있다.
이벤트는 e.data안에 들어있고 iframe document에서 보낼 때 작성한 키로 접근 가능하다.
이 코드는 메시지를 받아 특정 id안에 innerText로 넘겨받은 데이터를 저장해준다.

이런식으로의 접근이 가능하며 부모에서 자식으로 자식에서 부모로 모두 가능하다.