프레임이 바뀔 때마다 자동으로 프레임의 사이즈에 맞게 크기를 조정한다.

위의 소스는 모든 플랫폼에서 잘 작동할것 같은 예감이 든다.

http://stackoverflow.com/questions/14713339/why-is-postmessage-script-not-working-in-ie8

아래 소스는 프레임을 불러왔을 때 자동으로 높이를 조정한다.

iframe cross domain 도 가능하다. 결론은 상호조약이 있어야 한다.

부모페이지에는 자식페이지 주소가 있어야 하고 자식페이지에는 부모페이지 주소가 있어야 한다.

여기 CCM음반 카테고리는 다 아래의 소스로 되어 있으며 IE8, Chrome 에서 잘 작동한다. (iframe cross domain)

IE7 이하는 postMessage 이벤트를 지원하지 않아서 안된다.

======================================================================

<script type="text/javascript">

    if (window.addEventListener) {

        window.addEventListener('message', letsgo, false);

    } else if (window.attachEvent) {

        window.attachEvent('onmessage', letsgo);

    }

    function letsgo(event) {

        var iframe = document.getElementById('ifr');

        if (event.origin !== 'http://exm.com') return; // iframe src 도메인. 없어도 가능

        if (isNaN(event.data)) return; // only accept something which can be parsed as a number. 없어도 가능

        var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar

        iframe.height = height + "px";

    }

</script>

<iframe src="http://exm.com/1.html" frameborder="0" scrolling="no" style="width: 100%;" id="ifr"></iframe>

=========================================================================

같은 도메인이면 postMessage 없이 아래로 가능하지만 다른 도메인이면 안된다.

<script language="javascript">

function ResizeHeight(FrameID)

{

    var this_height= document.getElementById(FrameID).contentWindow.document.body.scrollHeight;

    document.getElementById(FrameID).height=this_height;

}

</script>

<iframe id="iFrame" src="1.html" width="100%" onLoad="ResizeHeight('iFrame')"></iframe>

JQuery  ( IE8 에서는 안된다 ㅠ )

$(function() {

    $('#iFrame').load(function() {

        $(this).css('height', $(this).contents().find('body').height()+'px');

    });

});