Javascript는 자동 확장_javascript 기술을 달성하기 위해 IFrame의 높이를 동적으로 변경합니다.-JS 튜토리얼-php.cn

Javascript는 자동 확장_javascript 기술을 달성하기 위해 IFrame의 높이를 동적으로 변경합니다.

WBOY

풀어 주다： 2016-05-16 17:20:00

원래의

1314명이 탐색했습니다.

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></script>

2. IFrame의 특정 페이지(즉, 하위 페이지)에 onload 이벤트를 추가합니다

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

< body onload="IFrameResize()"> >3. 위의 첫 번째 단계에서 메소드 본문의 두 번째 줄에 작성한 childFrame

code

코드는 다음과 같습니다.

구체 구현 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은 




코드를 복사하세요

코드는 다음과 같습니다.