멀티 브라우저 iframe 적응형 높이(ie8, Google Chrome 4.0 및 firefox3.5.3)_javascript 기술과 호환 가능

소규모 프로젝트인 Longli 중학교 멀티미디어 교실 관리 시스템은 백엔드 관리에 iframe을 사용합니다. 콘텐츠를 동적으로 로드해야 하기 때문에 iframe은 콘텐츠 페이지의 높이에 적응해야 하며 Google을 사용하여 많은 답변을 찾았는데 성공적인 것은 다음과 같습니다. 이 코드

코드 복사 코드는 다음과 같습니다.

iframe 코드 :

코드 복사 코드는 다음과 같습니다.

>

IE8에서는 적응형 높이 구현에 성공했지만 Google Chrome에서는 높이가 증가하기만 하고 감소하지는 않습니다. 즉, 키가 커진 후에도 줄어들지 않습니다.

그러면 각 브라우저의 성능이 달라집니다. 동일하지 않으며 단일 값이 정확하지 않습니다. 그러나 규칙을 찾을 수 있습니다. 즉, 최대 두 값을 취하는 것은 다양한 브라우저와 호환될 수 있습니다. 따라서 메인 페이지 코드는 다음과 같이 변환됩니다.

코드 복사 코드는 다음과 같습니다.

function reinitIframe(){var iframe = document.getElementById("frame_content");

try{
var bHeight = iframe.contentWindow.document.body.scrollHeight
var dHeight = iframe.contentWindow; document .documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height
}catch(ex){}
}
window.setInterval ( "reinitIframe()", 200);


이런 방식으로 호환성 문제는 기본적으로 해결됩니다. 그런데 절대 위치에 있는 레이어가 값에 영향을 미칠 뿐만 아니라 float도 두 값 사이의 차이를 유발합니다.

데모를 보면 IE를 제외한 다른 브라우저에서 레이어를 확장한 후 숨길 때 얻은 높이 값이 실제 값인 184가 아닌 확장된 높이인 303으로 계속 유지되는 것을 볼 수 있습니다. 숨겨진, 즉 키가 커진 후에는 줄어들 수 없다고 말씀하셨습니다. 이 현상은 포함된 다른 페이지 간에 전환할 때도 발생합니다. 긴 페이지에서 짧은 페이지로 전환할 때 얻은 높이는 여전히 높은 값입니다.
정리하면 iframe 폼의 높이가 문서의 실제 높이보다 높을 경우 해당 높이를 폼의 높이로 간주하고, 폼의 높이가 실제 문서의 높이보다 낮은 경우에는 다음과 같이 정리할 수 있습니다. 문서 높이, iframe 높이가 문서의 실제 높이로 간주됩니다. 따라서 높이를 동기화하기 전에 실제 문서보다 높이를 낮은 값으로 설정하는 방법을 찾아보세요. 따라서 iframe에 onload="this.height=100"을 추가하면 페이지가 로드될 때 먼저 충분히 짧은 높이로 축소된 다음 동일한 높이로 동기화됩니다.
이 값은 실제 애플리케이션에서 결정됩니다. 충분히 짧아야 하지만 너무 짧으면 안 됩니다. 그렇지 않으면 FF와 같은 브라우저에서 눈에 띄게 깜박거릴 수 있습니다. 메인 페이지에서는 DOM 작업을 모니터링할 수 없으며 DOM 작업이 완료된 후에만 높이를 줄일 수 있습니다.
실제 프로젝트 중 하나에서는 비용과 이점 사이의 균형 때문에 이 코드를 모든 DOM 함수에 삽입해야 했는데 비용이 많이 들지 않았기 때문에 이 작업을 수행하지 않았습니다. 데모에서도 이 작업은 수행되지 않았습니다. 독자들에게 더 좋은 방법이 있으면 알려주시기 바랍니다.
/************************************원문 인용 끝****** *** ********************** /
빨간색 문장을 주목해주세요. 읽어보니 iframe.height를 할당할 수 있는지 궁금합니다. 먼저 iframe.height를 변경하기 전에 iframe.height="10px"와 같이 충분히 작은 초기 값을 iframe.height로 변경하면 원본 텍스트의 빨간색 부분 문제가 해결됩니다.
최종 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

iframe 코드가 여전히 작동하지 않습니다. t 변경:

코드 복사 코드는 다음과 같습니다.

테스트 후 iframe은 IE8, Google Chrome 4.0 및 Firefox3.5.3의 높이에 성공적으로 적응했습니다.