다른 도메인 iframe 높이 자동 조절

A 사이트에서 B사이트의 내용을 iframe으로 불러올 때,

자동으로 iframe 높이를 조절하게 해주는 스크립트입니다.

 

A사이트 

 

html

 <iframe id="iframe"></iframe>

 

js

//browser compatibility: get method for event 
// addEventListener(FF, Webkit, Opera, IE9+) and attachEvent(IE5-8)
var myEventMethod = 
    window.addEventListener ? "addEventListener" : "attachEvent";
// create event listener
var myEventListener = window[myEventMethod];
// browser compatibility: attach event uses onmessage
var myEventMessage = 
    myEventMethod == "attachEvent" ? "onmessage" : "message";
// register callback function on incoming message
myEventListener(myEventMessage, function (e) {
    // we will get a string (better browser support) and validate
    // if it is an int - set the height of the iframe #my-iframe-id
    if (e.data === parseInt(e.data)) 
        document.getElementById('iframe').height = (parseInt(e.data)+20) + "px";
}, false);

 

B사이트

js

// all content including images has been loaded
       window.onload = function() {
             // post our message to the parent
            window.parent.postMessage(
                // get height of the content
              document.body.scrollHeight
                // set target domain
                ,"A사이트.html"
            )
        };

 

이렇게 처리해주면 자동으로 높이가 조절됩니다!