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

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

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

<script>
function IFrameResize(){
//alert(this.document.body. scrollHeight); //현재 페이지의 높이 팝업
var obj = parent.document.getElementById("childFrame") //상위 페이지의 IFrame 개체 가져오기
//alert(obj.height ); //상위 페이지의 IFrame에 설정된 높이를 팝업합니다
obj.height = this.document.body.scrollHeight; //상위 페이지의 IFrame 높이를 페이지 높이로 조정합니다. 🎜>}
</script>

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

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

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

code

코드는 다음과 같습니다. <IFRAME border=0 marginWidth=0 frameSpacing= 0 marginHeight=0 src="frame1 .jsp"frameBorder=0 noResize scrolling="no" width=100% height=100% vspale="0" id="childFrame"></IFRAME>

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




코드를 복사하세요

코드는 다음과 같습니다.

<iframe src="main.action" height="700"frameborder="0" width="100%" id="mainFrame" name="mainFrame"></iframe>