Highly adaptive solution of iframe multi nesting infinite nesting

Time:2020-11-23

There are three pages a, B and C. page a contains page B and page B contains page C. page a adapts with page B and page C adapts with page B
Page a

Copy code

The code is as follows:

<body>
< iframe name = “main” width = “980” scrolling = “no” frameBorder = “0” SRC = “bpage”
onload=”this.height=main.document.body.scrollHeight;this.width=main.document.body.scrollWidth;if(this.height < 410){this.height=410;}”>
</iframe>
</body>

Page B

Copy code

The code is as follows:

<body>
<! — left — >
<div style=”flost:left;”>
Menu on the left
</div>
<! — right — >
<div style=”flost:right;”>
< iframe name = “testiframe” frameBorder = 0 style = “width: 680px;” scrolling = “no” SRC = “C page” > < / iframe > “
</div>
</body>

C page
Write the following JS function to the bottom page (that is, the page of your grandson) and call this method in the onload event of body [the formula is universal formula].

Copy code

The code is as follows:

<script type=”text/javascript”>
//The iframe is automatically expanded to make the iframes of all parent pages automatically adapt to the height of the included page
function autoHeight(){
var doc = document,
p = window;
while(p = p.parent){
var frames = p.frames,
frame,
i = 0;
while(frame = frames[i++]){
if(frame.document == doc){
frame.frameElement.style .height = doc.body.scrollHeight +’PX’; / / it must be noted here that ‘PX’ must be added to Firefox, otherwise it will not work
doc = p.document;
break;
}
}
if(p == top){
break;
}
}
}
</script>
<body onload=”autoHeight();”>
<! — after testing, the body of the most child page must have a high div, otherwise the above adaptation will take effect — >
<div style=”height: 1px;”>
</div>
< div style = “padding bottom: 10px;” > <! — this sentence is also essential — >
Here you can write the real content and set a value for the padding bottom of the Div
</div>
</body>