[window.postMessage] 크로스 도메인 iframe 높이 조절하기
2021. 2. 17.
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'
);
'JS_CSS' 카테고리의 다른 글
[javascript] 개행, 공백 제거 (0) | 2021.06.22 |
---|---|
[javascript] Date 날짜 계산 이전/이후 구하기 (0) | 2021.02.25 |
[css for IE] IE8,9 CSS핵 (0) | 2021.02.17 |
pc,모바일 구분 - 안드로이드, iOS 구분하기 (0) | 2021.02.17 |
[JQuery] map 으로 join하는 함수 - 일렬화 (0) | 2021.02.17 |