Home  >  Article  >  Web Front-end  >  Javascript dynamically changes the height of IFrame to achieve automatic extension_javascript skills

Javascript dynamically changes the height of IFrame to achieve automatic extension_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:20:001362browse

Dynamically change the height of the IFrame to realize the automatic expansion of the IFrame and the automatic shrinking of the parent page
Principle: When the IFrame sub-page is loaded, call the parent IFrame object to change its height
Specific implementation one:
1. In the specific page of the IFrame (that is, the sub-page), add JavaScript

Copy the 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 IFrame object of the parent page<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 the page <br>} <br></script>

2. On the specific page of the IFrame (that is subpage), add the onload event
Copy code The code is as follows:

< body onload="IFrameResize()">

3. Add an ID to the IFrame tag of the parent page, which is the childFrame
Copy code The code is as follows:


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn