Title.
There are many methods available online. But that's what happens when you do a test. With the help of a good classmate, I use this method to achieve this function.
Surround the parent page with a <div> element outside the IFRAME element. Then set the initial height of <div> do not need to set, set a good width, and then surrounded by the height width of the iframe is set to 100%; You can also use the div, directly through the child page of the method to modify the level of the parent page iframe.
<!--main begin-->
<div id= "iframeheight" >//note to set a good width in CSS, height can be emptied
<iframe id= "Carmainbox" name= "Carmainbox" src= "dongguan.html" frameborder= "0" width= "100%" height= "100%" scrolling= "no" ></iframe>
</div>
<!--main end-->
In the referenced child page, add the following window.inload () function:
<!--update frame height window.load code-->
<script type= "Text/javascript" >
window.onload=function (num) {
try{
var s = parent.document.getElementById (' iframeheight ') | | null;
} catch (e) {}
//whether to obtain this element of the Div, if acquired, set his height to the inner page height plus 50px flexible space
s?s.style.height = Document.body.offsetHeight +50+ ' px ': ';
}
</script>
This method can be compatible with Chrome,ie,firefox,safari and other mainstream browsers.
Note that this function must be executed after the height of the child page is determined, otherwise its height will appear incomplete. We can add a delay function to implement the delay loading onload function.
The following method is invoked on the parent page to force the child pages in the IFRAME to be refreshed.
settimeout (function () {sonPage.window.onload ();},500);
Sonpage will default get to the inside page of the IFRAME. Then perform the OnLoad function, 500 is the time delay, in milliseconds.