동일 출처 정책을 우회하면서 Iframe 높이를 동적으로 조정하려면 어떻게 해야 합니까?

동적 Iframe 높이 조정

iframe을 통해 외부 소스의 콘텐츠를 통합하는 경우 적절한 높이 조정이 중요합니다. 이 기사에서는 iframe이 콘텐츠에 맞게 자동으로 크기를 조정할 수 있도록 동일 출처 정책을 우회하는 솔루션에 대해 자세히 설명합니다.

동일 출처 정책을 우회하기 위해 브라우저 특성 악용

핵심은 상위 도메인이 iframe과 통신하도록 허용하는 반면 iframe은 해당 도메인과 직접 통신할 수 없는 브라우저 특성을 활용하는 데 있습니다. 부모. 이 통신 계층 구조는 아래에 설명되어 있습니다.

Page	Can Communicate With
www.foo.com/home.html	N/A (parent)
www.bar.net/framed.html	www.foo.com/helper.html (child)
www.foo.com/helper.html	www.foo.com/home.html (parent)

URL 인수를 사용하여 높이 정보 전달

iframe의 높이를 확인하려면 콘텐츠 페이지(www.bar.net/ Framed.html)은 이를 계산하고 URL 인수를 통해 도우미 iframe(상위와 동일한 도메인에 위치)의 src 속성을 설정합니다. 그런 다음 도우미 iframe은 이 정보를 부모에게 전달하고 부모는 이에 따라 iframe 높이를 조정할 수 있습니다.

코드 구현

www.foo.com/home. HTML(부모 페이지):

function resizeIframe(height) {
  // Adjust the iframe height with a slight margin
  document.getElementById('frame_name_here').height = parseInt(height) + 60;
}

www.bar.net/framed.html(하위 페이지):

function iframeResizePipe() {
  // Calculate and pass the height to the helper iframe
  var height = document.body.scrollHeight;
  var pipe = document.getElementById('helpframe');
  pipe.src = 'http://www.foo.com/helper.html?height=' + height + '&cacheb=' + Math.random();
}

www.foo .com/helper.html(도우미 페이지):

function parentIframeResize() {
  // Extract the height from the URL argument
  var height = getParam('height');

  // Communicate the height to the parent page
  parent.parent.resizeIframe(height);
}

위 내용은 동일 출처 정책을 우회하면서 Iframe 높이를 동적으로 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!