Automatically adjusts the iframe height of Each browser.

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.