Dynamically change the height of IFrame to achieve IFrame auto-stretching to adapt to height _ javascript tips-js tutorial

Dynamically change the height of the IFrame to automatically extend the IFrame. The parent page is also automatically scaled down. The principle is that when the IFrame sub-page is loaded, the parent IFrame object is called, change the height of the IFrame dynamically to achieve automatic IFrame stretching, and the parent page is automatically scaled down.
Principle: when loading an IFrame sub-page, call the parent IFrame object to change its height.
Implementation 1:
1. On the IFrame page (subpage), add JavaScript

The Code is as follows:

Script
Function IFrameResize (){
// Alert(this.doc ument. body. scrollHeight); // The height of the current page is displayed.
Var obj = parent.doc ument. getElementById ("childFrame"); // get the IFrame object of the parent page
// Alert (obj. height); // The height set in IFrame on the parent page is displayed.
Obj. height = this.doc ument. body. scrollHeight; // adjust the IFrame height in the parent page to the height of this page.
}
Script

2. Add an onload event to the body of the IFrame page (that is, the Child page ).

The Code is as follows:

3. Add an ID for the IFrame label of the parent page, that is, the childFrame written by row 2nd in the method body in the first step above.

The Code is as follows:

Implementation 2:

The Code is as follows:

// Dynamically change the height of the parent class iframe
// Js called on the iframe page
$ (Function (){
// Obtain the window height
Var winH = $ (window). height ();
// Obtain the page height
Var bodyH = $ (document). height ();
If (bodyH> winH ){
Optional bytes parent.doc ument. getElementById ("mainFrame"). height = bodyH;
} Else {
Optional bytes parent.doc ument. getElementById ("mainFrame"). height = winH;
}
});

The iframe of the parent page is

The Code is as follows: