[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

 

1.$.postMessage(

2.'보내려는 데이터 값',

3.'http://test.com',

4.parent

5.);

 

 

1.$.receiveMessage(

2.function(e){

3.alert( e.data ); //받는 데이터 값

4.},

5.'http://www.test.net'

6.);