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

Source: Internet
Author: User
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:


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.