브라우저 전체의 콘텐츠에 맞게 iFrame의 높이를 동적으로 조정하려면 어떻게 해야 합니까?

콘텐츠에 맞게 iFrame 높이를 동적으로 조정

iFrame 내에 aspx 페이지를 삽입할 때 iFrame의 높이가 콘텐츠를 적절하게 수용하지 못하여 바람직하지 않은 스크롤 막대가 나타날 수 있습니다. 이 문제를 해결하기 위해 크로스 브라우저 솔루션을 살펴보겠습니다.

크로스 브라우저 과제 이해

제공된 jQuery 접근 방식은 Chrome에서 iFrame 높이를 성공적으로 조정하지만 Firefox에서는 문제가 발생합니다. 이러한 불일치는 다양한 브라우저가 XSS(교차 사이트 스크립팅) 제한을 처리하는 방식의 차이로 인해 발생합니다.

최적의 솔루션

iFrame 콘텐츠의 높이를 결정하기 위해 contentWindow.document를 활용합니다. body.scrollHeight. iFrame이 로드되면 다음 JavaScript를 사용하여 동적으로 크기를 조정합니다.

function iframeLoaded() {
    var iFrameID = document.getElementById('idIframe');
    if(iFrameID) {
          iFrameID.height = "";
          iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
    }   
}

구현

iFrame을 삽입한 페이지 내에 이 JavaScript를 통합하고 이벤트 핸들러를 연결합니다. iFrame 태그의 onLoad 속성:

<iframe>

확장 사용 사례

iFrame 내의 콘텐츠 업데이트에 리사이저의 수동 트리거가 필요한 시나리오에서는 iFrame의 콘텐츠 스크립트에서 iframeLoaded()를 호출할 수 있습니다.

parent.iframeLoaded();

이 포괄적인 솔루션은 브라우저 간 콘텐츠에 따라 iFrame 높이의 크기를 동적으로 조정하여 원치 않는 스크롤 막대를 제거하는 호환성.

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