변화하는 Cross-domain iframe 높이 자동 조절

  A라는 도메인의 페이지가 iframe 안쪽에 들어가있고, B라는 도메인의 페이지에서 이 iframe을 불러올 때 iframe의 높이를 자동으로 조절하는 일이 생각보다 쉽지는 않습니다. stackoverflow등을 참고하여 아래와 같은 동작하도록 적용을 하였습니다. 비슷한 문제를 겪는 다른 분들이 계실것 같아 공유합니다.

iframe 안쪽 문서

페이지의 내용이 갱신될 때마다 아래의 javascript가 실행되도록 해줍니다.

	
parent.postMessage(document.body.scrollHeight,"http://b.com"); 
	

부모 페이지에 현재 자신의 높이를 postMessage Method를 통하여 전달합니다.

부모 페이지

페이지의 아무 곳에나 다음과 같은 javascript code와 listener를 추가합니다.

	
function receiveMessage(event) {
	if (event.origin !== "http://a.com")
	return;

	$("#search_result").height(event.data + 20);
}
if ('addEventListener' in window){
	window.addEventListener('message', receiveMessage, false);
} else if ('attachEvent' in window){ //IE
	window.attachEvent('onmessage', receiveMessage);
} 
	

  부모페이지에서는 이 메시지를 catch하여 높이를 이에 맞춰 줍니다. 이부분은 jQuery로 작성한 부분인데, jQuery를 안쓰시는 분이라면 css property를 수정해주시면 될 것 같습니다.

  이 방법의 장점은 기존의 onload로 높이를 setting하는 방식과 다르게 원하는 때에 부모페이지와 sync를 맞춰주는데에 있습니다. php를 쓰면 include를 통해 삽입하는 방법이 있지만 iframe을 굳이 써야하는 환경에서는 이러한 방법으로 동작하도록 만들어주시면 깔끔하게 해결될 듯 합니다.