[javascript] 아이프레임간 데이터 전송 방법

외부사이트를 아이프레임으로 불러오는 경우 높이 값을 수정하고 싶을때 ‘targetWindow.postMessage’를 이용해서 필요한 데이터를 전송, 전달 받을 수 있다.

크로스도메인에서도 사용가능한 방법이다.

<!-- mysite.com -->

<iframe id ="sizetracker" src="http://redcong.com/test.php" scrolling="auto" frameborder="0" allowtransparency="true" class="reser_frame" style="height: 500px !important;"></iframe>
<script type="text/javascript">
	window.addEventListener("message", function(e){
		var data = JSON.parse(e.data);
	    console.log(data);
	}, false);
</script>

<!-- example.com -->

<div>...</div>
<script type="text/javascript">
  parent.postMessage(
  '{"height": '+ document.body.scrollHeight +'}',
  "http://mysite.com" // '*' 사용할 경우 모든 도메인 허용
</script>

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