도메인 전체의 콘텐츠 높이에 따라 Iframe의 크기를 동적으로 조정하려면 어떻게 해야 합니까?

콘텐츠 높이를 기준으로 Iframe 크기 조정

iframe을 사용하여 다른 도메인의 콘텐츠를 표시할 때 콘텐츠에 맞게 높이를 조정할 수 있습니다. 동일 출처 정책으로 인해 문제가 될 수 있습니다. 이 정책은 서로 다른 도메인에 있는 페이지 간의 JavaScript 통신을 제한합니다.

해결책:

이러한 제한을 극복하려면 iframe 콘텐츠와 프레이밍 페이지.

1. 도메인 간 통신:

iframe 콘텐츠와 프레이밍 페이지가 서로 다른 도메인에 있으므로 직접 통신이 불가능합니다. 그러나 다른 iframe을 사용하여 "파이프" 메커니즘을 설정할 수 있습니다.

2. 높이 계산 및 메시지 전달:

iframe 콘텐츠가 로드되면 높이를 계산하고 프레이밍 페이지의 숨겨진 iframe 소스를 동일한 도메인의 도우미 페이지로 설정하여 계산된 높이를 전달합니다. URL의 인수로.

3. 도우미 페이지 및 상위 프레임 크기 조정:

동일한 도메인의 도우미 페이지는 iframe 콘텐츠에서 높이를 수신하여 이를 상위 프레임에 전달합니다. 그런 다음 그에 따라 iframe 크기를 조정할 수 있습니다.

코드:

프레임 페이지:

<script type="text/javascript">
  function resizeIframe(height) {
    document.getElementById('myIframe').height = height + 60;
  }
</script>
<iframe>

Iframe 콘텐츠:

<script type="text/javascript">
  function setIframeHeight() {
    var height = document.body.scrollHeight;
    document.getElementById('iframeResizer').src = 'helper.com?height=' + height;
  }
</script>
<iframe>

도우미 페이지:

<script type="text/javascript">
  function resizeParentIframe() {
    var height = getParam('height');
    parent.parent.resizeIframe(height);
  }
  function getParam(name) {
    var regex = new RegExp("[\?&]" + name + "=([^&amp;#]*)");
    var results = regex.exec(window.location.href);
    return results ? results[1] : "";
  }
</script>

참고:

이 솔루션은 동일 출처 정책이 iframe 콘텐츠와 도우미 페이지 간의 JavaScript 통신을 허용한다고 가정합니다. 그렇지 않은 경우 추가 조치가 필요할 수 있습니다.

위 내용은 도메인 전체의 콘텐츠 높이에 따라 Iframe의 크기를 동적으로 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!