[window.postMessage] 크로스 도메인 iframe 높이 조절하기

1. A site (부모페이지) - B site의 iframe 안의 자식창에서 높이 값을 e.data에 담아서 페이지가 열릴 때 마다 신호를 보낸다. 

if (window.addEventListener) {

	window.addEventListener('message', postMessageController, true);

}else if(window.attachEvent) {

	window.attachEvent('onmessage', postMessageController);

}

function postMessageController(e){

    if(e.origin === "https://www.b-site.co.kr"){ // www.b-site 와 b-site는 다르고 http와 https는 다르다.
            
            $('#iframename').height(parseInt(e.data) + 32);
    
    }

}

 

​2. B site (iframe  속의 자식페이지) - 페이지가 열릴 때 onload 에서 높이 값을 측정 후  postMessage에 담아서 A site로 전송

window.onload = function(){

  var high = $('#높이를 가진 개체의 아이디').height();
  window.parent.postMessage(high, "http://www.a-site.com"); // www.a-site.com 과 a-site.com 은 다르고 http와 https는 다르다.

}

 

JQUERY

iframe

$.postMessage(
  '보내려는 데이터 값',
  'http://test.com',
  parent
);

부모페이지

$.receiveMessage(function(e){
  	alert( e.data ); //받는 데이터 값
  },
  'http://www.test.net'
);