javascript

Javascript dynamically changes the height of the IFrame to achieve automatic stretching

Dynamically change the height of the IFrame, to achieve the automatic extension of the IFrame, the parent page also automatically shrink How it works: when an IFrame child page loads, the parent IFrame object is called, changing its height Specific implementation 1: 1. Add JavaScript to a specific IFrame page (that is, a child page)


<script>
function IFrameResize(){
//alert(this.document.body.scrollHeight); // Pops up the height of the current page
var obj = parent.document.getElementById("childFrame"); //Gets the parent page IFrame object
//alert(obj.height); // The parent page pops up IFrame Height set in
obj.height = this.document.body.scrollHeight; //Adjust the height of the IFrame in the parent page for this page
}
</script>

2. Add the onload event to the body of the IFrame’s concrete page (that is, the child page)


<body onload="IFrameResize()">

3. Add an ID to the IFrame tag of the parent page, which is the childFrame written to in line 2 of the method body in the first step above


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

Specific realization 2:


//Dynamically changes the height of the parent iframe
//Js called by the iframe page
$(function(){
//Take the height of the window
var winH = $(window).height();
//Take the height of the page
var bodyH = $(document).height();
if(bodyH > winH){
window.parent.document.getElementById("mainFrame").height=bodyH;
}else{
window.parent.document.getElementById("mainFrame").height=winH;
}
});

The iframe of the parent page is


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