Home  >  Article  >  Web Front-end  >  Dynamically change the height of the IFrame to automatically stretch the IFrame to adapt to the height_javascript skills

Dynamically change the height of the IFrame to automatically stretch the IFrame to adapt to the height_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:44:53982browse

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

Copy code The code is as follows:

<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
Copy the code The code is as follows:



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
Copy code The code is as follows: