도메인 간 콘텐츠를 기반으로 iFrame의 크기를 동적으로 조정하려면 어떻게 해야 합니까?-JS 튜토리얼-php.cn

도메인 간 콘텐츠를 기반으로 iFrame의 크기를 동적으로 조정하려면 어떻게 해야 합니까?

Patricia Arquette

풀어 주다： 2024-12-30 10:26:10

원래의

1029명이 탐색했습니다.

How Can I Dynamically Resize an iFrame Based on its Cross-Domain Content?

콘텐츠에 따라 iFrame 크기 조정: 도메인 간 통신 탐색

도메인 간 문제 이해

iFrame 내에서 외부 도메인의 콘텐츠를 표시하는 경우 , 동일 출처 정책은 해당 iFrame의 크기를 동적으로 조정하여 content.

회피 전략

도메인 간 제한을 우회하는 한 가지 기술은 중첩된 iFrame 구조의 페이지 간 통신을 허용하는 브라우저 특성을 이용하는 것입니다. 본질적으로:

상위 페이지(www.foo.com/home.html) iframe 하위 페이지(www.bar.com/framed.html).
하위 페이지(www. .bar.com/framed.html) iframes 도우미 페이지 (www.foo.com/helper.html).

이 구조를 통해 다음 사이의 통신이 가능합니다:

www.bar.com/framed.html 및 www.foo .com/helper.html(동일한 iFrame 내)
www.foo.com/home.html 및 www.foo.com/helper.html (동일한 도메인)

구현

www.foo.com/home.html:

<script>
  function resizeIframe(height) {
    document.getElementById("frame_name_here").height = parseInt(height) + 60;
  }
</script>
<iframe>

로그인 후 복사

에서 www.bar.com/framed.html:

<body onload="iframeResizePipe()">
<iframe>

로그인 후 복사

www.foo.com/helper.html:

<body onload="parentIframeResize()">
<script>
  function parentIframeResize() {
    var height = getParam("height");
    parent.parent.resizeIframe(height);
  }

  function getParam(name) {
    var regex = new RegExp("[\?&]" + name + "=([^&]*)");
    var results = regex.exec(window.location.href);
    if (results == null) return "";
    else return results[1];
  }
</script>

로그인 후 복사

이 솔루션 상위 페이지와 동일한 도메인에 있는 "도우미" iframe(www.foo.com/helper.html)을 통한 통신이 포함되며 하위 iFrame과 상위 iFrame 간의 크기 조정 요청.

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