콘텐츠에 맞게 Iframe의 크기를 동적으로 조정하는 방법은 무엇입니까?

콘텐츠에 따라 Iframe 높이를 동적으로 조정하는 방법

iframe의 콘텐츠가 높이 제한을 초과하는 시나리오에서는 동적으로 조정하는 것이 필수적입니다. 초과 콘텐츠를 수용할 수 있는 크기입니다. 이는 JavaScript와 JQuery의 조합을 사용하여 달성할 수 있습니다.

iframe 콘텐츠의 높이를 검색하려면 다음 코드를 활용하세요.

contentWindow.document.body.scrollHeight

iframe이 로드되면 동적으로 크기를 조정하세요. 사용:

function iframeLoaded() {
  var iFrameID = document.getElementById('idIframe');
  if (iFrameID) {
    // Delete and recreate the height to ensure proper resizing
    iFrameID.height = "";
    iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
  }
}

iframe에 "onload" 이벤트 핸들러 포함 태그:

<iframe>

iframe 내에서 양식 제출 후 동적 크기 조정을 처리하려면 iframe의 콘텐츠 스크립트에 다음 코드를 포함하세요.

parent.iframeLoaded();

이 방법을 사용하면 iframe의 높이가 조정됩니다. 모든 콘텐츠를 동적으로 수용하여 스크롤 막대가 필요 없으며 다양한 브라우저에서 유연한 사용자 경험을 유지합니다.

위 내용은 콘텐츠에 맞게 Iframe의 크기를 동적으로 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!