Automatically adjusts the iframe height of Each browser.

Source: Internet
Author: User

Iframe is generally used for automatic height adjustment, which is the biggest and most troublesome. Here we provide a javascript code snippet and test example based on the actual usage of the iron/wood box.

1. The mzone. cc. js file is used to create namespace-based objects.

The Code is as follows: Copy code

Function mzone (){};


/**

 

* Desc: creates an object using the given object path.

 

* Para: objPath-Object Path, string type, format: xx. yy. zz

 

* Return: no Return value. You can directly use the object path after creation.

 

*/


Mzone. createObject = function (/* string */objPath ){

 

If (! ObjPath | typeof (objPath )! = 'String') return;

 

Var root = window;

 

Var parts = objPath. split ('.');

 

For (var I = 0; I <parts. length; I ++ ){

 

If (typeof (root [parts [I]) = 'undefined') root [parts [I] = {};

 

Root = root [parts [I];

 

}

 

};

2. The mzone. cc. iframe. js file and iframe Automatic Height Adjustment

 

* Title: The iframe height is automatically adjusted to adapt to various browsers (IE, Firefox, Chrome, etc.). Note that tests must be performed in web containers during chrome testing.

 

 

The Code is as follows: Copy code

Mzone. createObject ("mzone. cc. iframe ");

/**

 

* Desc: defines the static method of the object mzone. cc. iframe to realize dynamic iframe adjustment.

 

* Para: iframe-the iframe object to be adjusted, DOM object

 

* ExtHeight-automatically calculates the height of an iframe and then adds an additional height value, number type

 

* MinHeight-minimum height of iframe, numeric type

 

* Return: No Return Value

 

*/

 

Mzone. cc. iframe. autoHeight = function (/* object */iframe,/* int */extHeight,/* int */minHeight ){

 

Iframe. style. display = "block ";

 

If (iframe. contentDocument & iframe. contentDocument. body. offsetHeight) {// ff, chrome, etc.

 

Var h = parseInt (iframe. contentDocument. body. offsetHeight) + 50;

 

H + = extHeight;

 

If (h <minHeight) h = minHeight;

 

Iframe. height = h + "px ";

 

} Else if (iframe. Document & iframe. Document. body. scrollHeight) {// IE

 

Var h = parseInt (iframe. Document. body. scrollHeight) + 35;

 

H + = extHeight;

 

If (h <minHeight) h = minHeight;

 

Iframe. height = h + "px ";

 

} Else {

 

Var h = parseint(iframe.content?#document.doc umentElement. scrollHeight) + 35;

 

H + = extHeight;

 

If (h <minHeight) h = minHeight;

 

Iframe. height = h + "px ";

 

}

 

}


Save the above two js files and introduce them to the page. You can use the following method to automatically adjust the iframe height:

The Code is as follows: Copy code


Var iframe = document. getElementById ("iframe_body"); // iframe object


Var extHeight = 0; // The height of the iframe to be added

 

Var minHeight = 300; // The minimum height of iframe


Mzone. cc. iframe. autoHeight (iframe, extHeight, minHeight );


The above scripts have passed tests in IE, Firefox, and Chrome. It should be noted that there are errors during offline tests in google's Chrome browser, you need to test in a web Container (such as apache or IIS) to see the effect.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.