postMessage를 사용하여 다른 도메인의 Iframe 크기를 어떻게 조정할 수 있나요?-CSS 튜토리얼-php.cn

postMessage를 사용하여 다른 도메인의 Iframe 크기를 어떻게 조정할 수 있나요?

Mary-Kate Olsen

풀어 주다： 2024-12-05 18:39:10

원래의

225명이 탐색했습니다.

How Can I Resize an Iframe from a Different Domain Using postMessage?

postMessage를 사용하여 다른 도메인에서 Iframe 크기 조정

다른 도메인에서 iframe 크기를 조정하려는 시도는 어려운 작업일 수 있습니다. easyXDM을 사용하면 HTML5와 호환되지 않는 페이지에 대한 효과적인 대체 솔루션으로 사용할 수 있지만 고려해 볼 만한 대체 솔루션이 있습니다.

이러한 솔루션 중 하나가 postMessage를 활용하는 것입니다. 이 방법에는 하위 페이지의 높이를 상위 페이지에 전달한 다음 그에 따라 iframe의 높이를 조정하는 작업이 포함됩니다.

구현 세부정보

하위 페이지

다음을 사용하여 하위 페이지의 높이를 계산합니다. document.getElementById('element_id).scrollHeight.
parent.postMessage(actual_height,"*");를 사용하여 상위 페이지에 높이를 게시합니다. 별표를 사용하면 도메인에 관계없이 모든 상위 iframe에 게시할 수 있습니다.

<script>
function adjust_iframe_height(){
    var actual_height = document.getElementById('element_id').scrollHeight;
    parent.postMessage(actual_height,"*"); 
    //* allows this to post to any parent iframe regardless of domain
}
</script>

<body onload="adjust_iframe_height();"> 
//call the function above after the content of the child loads
</body>

로그인 후 복사

상위 페이지

상위 창에 이벤트 리스너를 추가하여 하위 페이지에서 메시지를 받습니다. iframe_id를 iframe ID로 바꾸세요.
수신된 높이에 따라 iframe의 높이를 업데이트하세요.

<script>
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
  document.getElementById('iframe_id').height = e.data + 'px';
},false);
</script>

로그인 후 복사