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
Summary of common problems in downloading and installing MySQL 5.7 on Win7 64-bit
1. Download MySQL from the official website: This...
How to make a List in CocosCreator
CocosCreator version: 2.3.4 Cocos does not have a...
Problems and solutions when replacing Oracle with MySQL
Table of contents Migration Tools Application tra...
How to configure domestic sources in CentOS8 yum/dnf
CentOS 8 changed the software package installatio...
Detailed example of HTML element blocking Flash
Copy code The code is as follows: wmode parameter...
Six inheritance methods in JS and their advantages and disadvantages
Table of contents Preface Prototype chain inherit...
Overview of MySQL Statistics
MySQL executes SQL through the process of SQL par...
JavaScript determines whether the browser is IE
As a front-end developer, I can’t avoid IE’s pitf...
Jenkins Docker static agent node build process
A static node is fixed on a machine and is starte...
How to use Docker container to access host network
Recently, a system was deployed, using nginx as a...
Example of using CSS to achieve semi-transparent background and opaque text
This article introduces an example of how to use ...
Detailed analysis of MySQL optimization of like and = performance
introduction Most people who have used databases ...
Control the light switch with js
Use js to control the light switch for your refer...
Detailed explanation of daily_routine example code in Linux
First look at the example code: #/bin/bash cal da...
Front-end development must learn to understand HTML tags every day (1)
2.1 Semanticization makes your web pages better u...