Dynamicly change the height of the IFrame to realize automatic expansion of the IFrame and automatic shrinkage of the parent page
Principle: When the IFrame sub-page is loaded, call the parent IFrame object to change its height
Specific Implementation 1 :
1. In the specific page of the IFrame (that is, the sub-page), add JavaScript
<script> <br>function IFrameResize(){ <br>//alert(this.document.body.scrollHeight); //Pop up the height of the current page<br> var obj = parent.document.getElementById("childFrame"); //Get the parent page IFrame object<br>//alert(obj.height); //Pop up the height set in the IFrame in the parent page<br>obj.height = this.document.body.scrollHeight; //Adjust the height of the IFrame in the parent page to the height of this page <br>} <br></script>
2. The details of the IFrame In the body of the page (that is, the sub-page), add the onload event
3. Add an ID to the IFrame tag of the parent page, which is what is written in the second line of the method body in the first step above. childFrame
Specific implementation two:
//Dynamically change the height of the parent iframe
//JS called by the iframe page
$(function(){
//Get the height of the window
var winH = $(window).height();
//Get 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