I have two iframe on a page, these two are tied, one on the left to display the person's data, a cell on the right side of the data, if the referenced page data is too large, it will be truncated, but set scrolling= "Auto", double will appear two scroll bar. Check the code on the Internet, there are probably two ways to achieve
method one. The referenced page is the static height of the JS code
Gets the static height of the contained page to set the height
function setfirstiframeheight (value) {
if (value== "person") of the IFRAME {
var Personheight = JQuery (' #person '). Contents (). Find ("meta"). attr ("content");
JQuery (' #person '). Height (personheight);
else if (value== "cell") {
var cellheight = jQuery (' #cell '). Contents (). Find ("meta"). attr ("content");
JQuery (' #cell '). Height (cellheight);
}
Main Page code
<table class= "Result" width= "100%" cellpadding= "0" cellspacing= "0" >
<tr>
<td width= "49%" >
<iframe name= "person" id= "person" frameborder= "0" onload= "
setfirstiframeheight" (' Person ') "scrolling=" No "width=" 100% "height=" >
</iframe>
</td>
<td width= "2%" > </td>
<TD width= "49%" >
<iframe name= "cell" id= "cell" frameborder= "0"
onload= "Setfirstiframeheight (' Cell ') "scrolling=" no "width=" 100% "height=" >
</iframe>
</td>
</tr>
</table>
To be included in the referenced page:
<meta content= "text/html; Charset=utf-8; 750px "/>
The realization principle is that when the main page of the IFRAME in the load, call the onload inside the JS code, get the height of the introduced page, and the height of the value assigned to the IFRAME, so that when the height of the introduced page exceeds the height of the IFRAME, The scroll bar will appear outside the two iframe.
However, this method does not get the height value of the child page with unknown heights, and when the introduced page height cannot be represented by CONTENT:XXXPX, this method does not apply, and a second method appears.
method Two, use interval to realize
<table class= "Result" width= "100%" cellpadding= "0" cellspacing= "0" > <tr> <td width= "49%" > <iframe name= "person" id= "person" frameborder= "0" scrolling= "no" width= "100%" height= "onload=" This.height=this.contentwindow.document.documentelement.scrollheight "> <script type=" text/javascript ">//Dynamically get the height function of the referenced page reinitIframe1 () {var iframe = document
. getElementById ("person");
try{var bheight = iframe.contentWindow.document.body.scrollHeight;
var dheight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max (bheight, dheight);
Iframe.height = height;
}catch (ex) {}} window.setinterval ("ReinitIframe1 ()", 200); </script> </iframe> </td> <td width= "2%" > </td> & LT;TD width= "49%" > <iframe name= "cell" id= "cell" frameborder= "0" scrolling= "no" width= "100%" Hei
ght= "onload=" "This.height=this.contentwindow.document.documentelement.scrollheight" > <script type= "Text/javascript" >//Dynamically get the height of the referenced page functi
On reinitIframe2 () {var iframe = document.getElementById ("cell");
try{var bheight = iframe.contentWindow.document.body.scrollHeight;
var dheight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max (bheight, dheight);
Iframe.height = height; }catch (ex)
{}} window.setinterval ("ReinitIframe2 ()", 200); </script> </iframe> </td> </tr> </table>
Turn from: http://zengyouyuan.iteye.com/blog/760569