Home >Web Front-end >JS Tutorial >Make iframe adaptive height (support XHTML, support FF)_javascript skills
Let me first explain that this method is only limited to subpages in iframes that are also local pages (cannot reference external network pages)
======Method======
Step 1 js part
function getSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body. scrollWidth;
yScroll = window.innerHeight window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
yScroll = document.body. scrollHeight; yScroll = document.body.offsetHeight;
If (Self.Innerheight) {// All Except Explorer
Windowwidth = Self.innerWidth;
Windowheight = Self.innerheight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
window Height = document.documentElement.clientHeight;
} else if (document .body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll pageHeight = windowHeight;
y = pageHeight;
} else {
pageHeight = yScroll;
> Width = xScroll; }
arrayPageSize = new Array( pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
This code is used to obtain the parameters of the target page, including page height and width, screen height and width
function autoHeight(pid) {
var x = new getSize();
parent.document.getElementById(pid).height=x[1];
}
This code is used to implement the height adaptation of the iframe in the parent page
\\\\\
The second step is the page part
This is the iframe of the parent page. It’s nothing special. It’s the same as an ordinary iframe, but the id value must be set. , so that the parameters of the sub-page can be called.
Use the onload event in the body to pass its height to the iframe of the parent page.