Home  >  Article  >  Web Front-end  >  Make iframe adaptive height (support XHTML, support FF)_javascript skills

Make iframe adaptive height (support XHTML, support FF)_javascript skills

WBOY
WBOYOriginal
2016-05-16 19:11:06999browse

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;

Var Windowwidth, Windowheight;
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.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn