iframe multi-layer nesting, unlimited nesting, highly adaptive solution

iframe multi-layer nesting, unlimited nesting, highly adaptive solution
There are three pages A, B, and C. Page A contains page B, and page B contains page C. Page A adapts to page B, and page C adapts to page B.
A-page

Copy code
The code is as follows:

<body>
<iframe id="main" name="main" width="980" scrolling="no" frameborder="0" src="Page B"
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;">
Left menu
</div>
<!--Right-->
<div style="flost:right;">
<iframe id="testIframe" name="testIframe" frameborder=0 style="width: 680px;" scrolling="no" src="C Page"></iframe>
</div>
</body>

Page C writes the following JS function to the bottom-level page (i.e. the page at the bottom) and calls the method in the onload event of body [the following formula is a universal formula]

Copy code
The code is as follows:

<script type="text/javascript">
//Automatically expand the Iframe so that all parent page Iframes automatically adapt to the containing page height
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'; // Please note that Firefox must add 'px', otherwise it will be invalid in Firefox
doc = p.document;
break;
}
}
if(p == top){
break;
}
}
}
</script>
<body onload="autoHeight();">
<!--After testing, the body of this most sub-page must have a div with height, otherwise the above adaptation will take effect-->
<div style="height: 1px;">
</div>
<div style="padding-bottom: 10px;"> <!--This sentence is also essential-->
You can write the real content here and set a value for the padding-bottom of the div
</div>
</body>

<<:  Good website copywriting and good user experience

>>:  MySQL REVOKE to delete user permissions

Recommend

VUE+SpringBoot implements paging function

This article mainly introduces how to implement a...

Detailed explanation of the principles and usage of MySQL data types and field attributes

This article describes the MySQL data types and f...

Linux common basic commands and usage

This article uses examples to illustrate common b...

Commonplace talk about MySQL event scheduler (must read)

Overview MySQL also has its own event scheduler, ...

Good website copywriting and good user experience

Looking at a website is actually like evaluating a...

HTML Tutorial: Collection of commonly used HTML tags (6)

Related articles: Beginners learn some HTML tags ...

Web standards learning to understand the separation of structure and presentation

When discussing Web standards, one thing that alwa...

js to achieve the complete steps of Chinese to Pinyin conversion

I used js to create a package for converting Chin...

Detailed explanation of encoding issues during MySQL command line operations

1. Check the MySQL database encoding mysql -u use...

How to set the default value of a MySQL field

Table of contents Preface: 1. Default value relat...

How to use Nginx proxy to surf the Internet

I usually use nginx as a reverse proxy for tomcat...

20 CSS coding tips to make you more efficient (sorted)

In this article, we would like to share with you ...

MySQL 5.7.12 installation and configuration tutorial under Mac OS 10.11

How to install and configure MySQL on Mac OS 10.1...

The best solution for resetting the root password of MySQL 8.0.23

This method was edited on February 7, 2021. The v...

Learn MySQL index pushdown in five minutes

Table of contents Preface What is index pushdown?...