히파루스의 솔직한 여행 이야기

iframe으로 불러들인 컨텐츠의 높이만큼 부모창에서 iframe의 높이를 동일하게 만들고 싶을 경우 몇가지 고려할 요소가 존재한다.
구조는 대략 이러하다.

부모창
<div id="부모창의DIV">
    <iframe id="부모창의IFRAME"></iframe>
</div>

자식창
<div id="자식창의DIV">
</div>

1. contents() 
2. on load

1. contents() 
먼저 iframe에 접근하기 위해선 그냥 find로 접근하면 안된다.
contents().find()로 접근해야 한다.

$("#부모창의IFRAME").contents().find("#자식창의DIV")

2. on load
1번까지 하고 접근해보면 null을 리턴하거나 undefine을 리턴한다.
본창의 document가 ready되었을 뿐이지 iFrame의 내용까지 모두 불러와진게 아니기 때문이다.
따라서 1번 코드는 이렇게 호출되어야만 한다.
부모창의IFRAME의 contents에서 자식창의DIV란 요소를 획득하겠다란 이야기인데
언제?
iFrame이 모두 불러와져서 온전하게 자식요소들에 접근이 가능할 때 접근하겠다.

$("#부모창의IFRAME").on("load", function() {
        var objIframeChild = $("#부모창의IFRAME").contents().find("#자식창의DIV);
        $("#부모창의DIV").height(objIframeChild.height());
        /* objIframeChild로 iFrame의 자식을 획득하였으니 이녀석을 가지고 놀면 된다. 
            objIframeChild.height() 등등*/
}

여기까지 한다면 내 도메인 내에선 아무 문제 없이 주고 받고가 가능하지만
다른 도메인이라면 이야기가 달라진다.

망할 cross oigin

Uncaught DOMException: Blocked a frame with origin "http://~~~~" from accessing a cross-origin frame.
크롬에서 개발자 도구로 지켜보면 이 에러를 내뱉으며 동작하지 않는다.

iFrame 소스의 on load 또는 jQuery $(document).ready 아래에 부모로의 통신용 postMessage를 구현해준다.
구조는 간단하다.
window.parent.postMessage() 안에 {키, 값} 형태로 넣어주고 콤마(,) 이후 전달 되는 도메인이나 IP주소를 입력해주면 된다.
도메인이나 IP주소 대신 *도 가능하지만 해킹당할 우려가 있으니 가급적 지양해야 할 것이고
만약 여러 도메인으로 통신을 해야겠다면 도메인이나 IP주소만 바꿔가며 window.parent.postMessage를 반복하면 된다.

window.parent.postMessage({키값: 보내고 싶은 값 }, "허용되는 도메인 또는 아이피");

보내는 곳인 자식쪽 소스
window.parent.postMessage({ childHeight: $("자식창의DIV").height() }, "http://......");

받는 곳인 부모쪽
그냥 리스너로메세지 받겠다 하면 끝이다.
window.addEventListener('message', function(e) {
        $("#부모창의DIV").height(e.data.childHeight);
 });