>  기사  >  웹 프론트엔드  >  IFrame의 높이를 동적으로 변경하여 height_javascript 기술에 맞게 IFrame을 자동으로 늘립니다.

IFrame의 높이를 동적으로 변경하여 height_javascript 기술에 맞게 IFrame을 자동으로 늘립니다.

WBOY
WBOY원래의
2016-05-16 17:44:53983검색

IFrame의 높이를 동적으로 변경하여 IFrame의 자동 확장 및 상위 페이지의 자동 축소를 실현
원리: IFrame 하위 페이지가 로드되면 상위 IFrame 객체를 호출하여 높이를 변경합니다
구체 구현 1:
1. IFrame의 특정 페이지(즉, 하위 페이지)에 JavaScript를 추가합니다

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

<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를 추가합니다.

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