왜 세 가지 이야기인가?
왜 세 번 이야기합니까? 하나는 이것이 정말 좋지 않은 주제이기 때문이고, 다른 하나는 Master Tai가 n년 전에 iframe 적응 높이에 대해 이야기하기 위해 이 기사를 썼기 때문입니다. 제가 이 질문을 다시 제기하는 이유는 실제로 이전 프로젝트에서 이 문제의 모든 측면을 접했고 이를 요약할 필요가 있기 때문입니다. 도움이 되셨기를 바라며, 틀린 부분이 있으면 정정해 주시기 바랍니다.
동일한 도메인 및 하위 페이지의 높이는 동적으로 증가하지 않습니다.
이 상황은 가장 간단합니다. 스크립트를 통해 직접 하위 페이지의 실제 높이를 가져오고 iframe 요소의 높이를 수정하면 됩니다. 그러나 주목해야 할 두 가지 사항이 있습니다.
페이지에 절대 위치 요소가 있거나 부동 요소가 없는 경우 상황은 약간 복잡합니다. 브라우저에 따라 처리 결과가 다르며, 자세한 내용은 이 데모를 참조하세요. 따라서 브라우저 감지를 수행하거나 Math.max를 사용하여 최대값을 계산하거나 다른 것을 생각합니다.
iframe에 포함된 페이지는 매우 크고 로딩 시간이 오래 걸릴 수 있습니다. 높이를 직접 계산할 경우 페이지가 다운로드되지 않아 높이 계산에 문제가 발생할 가능성이 높습니다. 따라서 iframe의 onload 이벤트에서 높이를 계산하는 것이 좋습니다. IE에서 onload 이벤트를 바인딩하려면 Microsoft 이벤트 모델 obj.attachEvent를 사용해야 합니다. 다른 브라우저에서도 obj.onload = function(){}을 직접 사용할 수 있습니다.
(기능(){
var _reSetIframe = 함수(){
var 프레임 = document.getElementById("frame_content_parent")
노력하다 {
var 프레임컨텐트 = 프레임.컨텐츠Window.document,
신체 높이 = Math.max
(frameContent.body.scrollHeight,
FrameContent.documentElement.scrollHeight);
if (bodyHeight != 프레임.높이){
프레임.높이 = 몸체높이;
}
}
잡기(예) {
프레임.높이 = 1800;
}
}
if(frame.addEventListener){
프레임.addEventListener
("로드",function(){setInterval(_reSetIframe,200);},false);
}또 다른{
frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
}
})();
동일한 도메인에서는 하위 페이지의 높이가 동적으로 증가하여 스크립트가 완전히 실패할 수 있습니다.
두 번째 예에서는 스크립트 오류를 고려했지만 스크립트가 전혀 실행되지 않으면 iframe 높이가 충분히 높지 않아 iframe의 콘텐츠가 표시되지 않습니다. 이런 이유로 보통은 프론트엔드 제어의 편의를 위해 충분한 높이를 설정해 두는데, 수정이 필요할 때는 CSS만 변경하면 되는 편이 더 적절하다고 생각합니다. 여기서는 선택기{ height:1800px }를 설정했습니다. 스타일 시트에 작성된 스타일은 node.style[property]를 사용하여 직접 검색할 수 없다는 점에 유의해야 합니다. Microsoft 모델의 경우 node.currentStyle[property]를 사용해야 합니다(여담: 비극적인 IE 모델은 CSS 의사- 클래스), W3C 모델의 경우 window.getCompulatedStyle(node,null)[property]를 사용하여 가져옵니다. 편의상 YUI를 직접 사용했습니다.
여기에는 또 다른 문제가 있습니다. iframe의 높이를 포함된 페이지의 높이보다 크게 설정하면 각 브라우저에서 이를 다르게 처리합니다. 예를 들어 Firefox에서는 body 요소의 높이를 계산해야 하며 html 요소의 높이는 iframe의 높이와 동일합니다. 그러나 페이지에 절대 위치가 지정되고 부동 요소가 지워지지 않은 경우에는 계산할 수 없습니다. 분명히 첫 번째 방법은 이 방법의 단점이 더 적습니다. 자세한 내용은 이 데모를 참조하세요.