Dynamic change of the height of the IFRAME, to achieve the automatic extension of the IFRAME, the parent page is also automatic God shrink
Principle: When the IFRAME page is loaded, call the parent IFrame object and change its height
To achieve a specific :
1, in the specific page of the IFRAME (that is, the sub page), add JavaScript
Copy Code code as follows:
<script>
function Iframeresize () {
alert (this.document.body.scrollHeight); Eject the height of the current page
var obj = parent.document.getElementById ("Childframe"); Get the parent page IFrame Object
alert (obj.height); Eject the height set in the IFRAME in the parent page
Obj.height = This.document.body.scrollHeight; Adjust the height of the iframe in the parent page for this page
}
</script>
2, in the specific page of the IFRAME (that is, the child page) in the body, add onload event
Copy Code code as follows:
<body onload= "iframeresize ()" >
3. Add ID for the IFRAME tag of the parent page, that is, the first step above, the Childframe written in the 2nd line of the method body
Copy Code code as follows:
<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>
Concrete Implementation Two:
Copy Code code as follows:
Dynamically changing the height of an iframe in a parent class
The IFRAME page calls the JS
$ (function () {
To 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
Copy Code code as follows:
<iframe src= "Main.action" height= "M" frameborder= "0" width= "100%" id= "MainFrame" name= "MainFrame" ></ Iframe>
