) IFRAME adaptive

Http://www.blogjava.net/josson/archive/2008/01/17/175914.html

1. Purpose
The system uses an embedded page (IFRAME) to display the webpage content (including embedding another webpage in the embedded page). This will cause the following problems:
A. How much different webpage content is inconsistent. As a result, the height of IFRAME cannot match the height of the implemented content or browser.
B. When the window is scaled, IFRAME cannot be adjusted automatically.

To solve these two problems, I wrote some JS methods to make IFRAME automatically adapt to the content or browser height.

2. jsCode
The following JS methods are included in the homepage:

/* *
* Embedded page height settings
  */
Function Handleframeload (){
  VaR Hdoc = Getbodyheight (document );
  VaR Tblmain = Document. getelementbyid ('tblmain ');
  VaR Mframe = Window. Mainframe;
  VaR Hframedoc = Getframeheight (mframe );
  VaR Htable = Hdoc - 80 ; // Subtract the height occupied by other controls except IFRAME on the page.
  If (Hframedoc > Htable) htable = Hframedoc;
Tblmain. style. Height = Htable;
Mframe. Height = Htable;
  If (Window. Mainframe. moduleright ! =   Null ){
// Indicates the embedded page, including Embedded The iframe id of the page is fixed as moduleright.
Initframeheight (mframe, htable );
}
}

/**
* Get the height of the current page
 */
FunctionGetbodyheight (DOC ){
If(Doc. All)ReturnDoc. Body. offsetheight;
Else ReturnDoc. Body. scrollheight;
}

/* *
* Get the height of the embedded page.
* If the sub-embedded ( Moduleright ) Page, consider the height of the page.
  */
Function Getframeheight (mframe ){
VaR H1 = Mframe.doc ument. Body. offsetheight;
VaR H2 = Mframe.doc ument. Body. scrollheight;
If (Mframe. moduleright ! =   Null ){
VaR H3 = Mframe.moduleright.doc ument. Body. scrollheight;
If (H3 > H2) H2 = H3;
}
Return H2;
}

/**
* Set the height of the Child embedded page.
* Set the height of the table where the IFRAME is located to adjust.
 */
FunctionInitframeheight (frame, hframe ){
VaRTBL=Frame.doc ument. getelementbyid ('tblmainframework ');
TBL. style. Height=Hframe;
}

3. Other settings
The main page (main. jsp) must be called: handleframeload after loading (onload), onresize (onresize), and IFRAME. The Code is as follows:

< Html >

< Body Onload = "Handleframeload ();" Onresize = "Handleframeload ();" >

< IFRAME SRC = "" ID = "Mainframe" Name = "Mainframe" Border = 0 Width = 100% Height = 100% Frameborder = "0" Marginwidth = "0" Hspace = "0" Scrolling = "No" Onload = "Handleframeload ();" />

</ Body >
</ Html

Other embedded pages are as follows (Note: The IFRAME height here is set to 100%, and its height is determined by the parent page by setting table <Tblmainframe> ):

< Html >

< Body Class = "Body" Style = "Overflow: hidden; margin: 0px; padding: 0px" >
< Table Width = "100%" Height = "100%" ID = "Tblmainframe" Border = "0" Align = "Center" Cellpadding = "0" Cellspacing = "0" >
< Tr >
< TD ID = 'Content' Height = 100% >
< IFRAME SRC = "About: blank" Width = "100%" Height = "100%" Name = "Moduleright" ID = "Moduleright" Frameborder = "0" Hspace = "0" />
</ TD >
</ Tr >
</ Table >
</ Body >
</ Html

4. Sample download: Sample