IFrame의 높이를 동적으로 변경하여 IFrame의 자동 확장 및 상위 페이지의 자동 축소를 실현
원리: IFrame 하위 페이지가 로드되면 상위 IFrame 객체를 호출하여 높이를 변경합니다
구체 구현 1:
1. IFrame의 특정 페이지(즉, 하위 페이지)에 JavaScript를 추가합니다
<script> <br>function IFrameResize(){ <br>//alert(this.document.body. scrollHeight); //현재 페이지의 높이 팝업<br> var obj = parent.document.getElementById("childFrame"); //상위 페이지 IFrame 객체 가져오기<br>//alert(obj.height); //상위 페이지의 IFrame에 설정된 높이를 팝업합니다<br>obj.height = this.document.body.scrollHeight; //상위 페이지의 IFrame 높이를 이 페이지의 높이로 조정합니다. <br> } <br></script>
2. IFrame의 세부정보 페이지 본문(즉, 하위 페이지)에 onload 이벤트를 추가합니다
🎜>
3. 상위 페이지의 IFrame 태그에 위의 첫 번째 단계에서 메소드 본문의 두 번째 줄에 작성한 ID를 추가합니다.
구체 구현 2
:
//상위 iframe의 높이를 동적으로 변경
//iframe 페이지에서 호출되는 JS
$(function(){
//창 높이 가져오기
var winH = $(window).height();
//페이지 높이 가져오기
var bodyH = $(document).height()
if(bodyH > winH){
window.parent.document.getElementById("mainFrame").height=bodyH;
}else{
window.parent.document.getElementById("mainFrame").height=winH; 🎜>})
상위 페이지의 iframe은
코드 복사