콘텐츠에 맞게 Iframe의 크기를 자동으로 조정하려면 어떻게 해야 합니까?

콘텐츠에 맞게 Iframe 크기 자동 조정

문제:

iframe의 너비와 높이를 어떻게 자동으로 조정할 수 있습니까? 포함된 콘텐츠에 정확히 맞도록 하려면? 이 조정은 iframe이 로드된 후에 가능해야 합니다.

해결책:

이를 달성하려면 내부의 신체 치수 변경을 처리하는 이벤트 작업이 필요합니다. 아이프레임. 해결책은 다음과 같습니다.

function resizeIFrameToFitContent(iFrame) {
  iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
  iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener("DOMContentLoaded", function (e) {
  var iFrame = document.getElementById("iFrame1");
  resizeIFrameToFitContent(iFrame);

  // To resize all iframes:
  var iframes = document.querySelectorAll("iframe");
  for (var i = 0; i < iframes.length; i++) {
    resizeIFrameToFitContent(iframes[i]);
  }
});

위 코드에서:

• resizeIFrameToFitContent() 함수는 스크롤 너비와 높이를 기반으로 iframe의 너비 및 높이 속성을 설정합니다. 포함된 본문입니다.
• DOMContentLoaded 이벤트 리스너는 iframe의 크기를 조정하는 데 사용됩니다. iframe이 로드되었습니다.
• 선택적인 추가 코드(주석 처리)를 사용하여 페이지의 모든 iframe 크기를 조정할 수 있습니다.

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