來源：http://www.mzone.cc/article/457.html

?

Post by 鐵木箱子 in?Web技術,?技術雜談?on 2010-10-16 9:09. 點評一下?評論 (2)?閱讀 (48) [轉載聲明]?轉載時必須標注：本文來源于鐵木箱子的博客http://www.mzone.cc
[本文地址]?本文永久地址是：http://www.mzone.cc/article/457.html

?? ? ?iframe一般在我們用來最大和最麻煩的就是自動高度調(diào)整了，這里結合鐵木箱子的實際使用情況，給出一個javascript代碼片段和測試例子。

1、mzone.cc.js文件，用來創(chuàng)建基于命名空間的對象

/**

* Title : 基于命名空間的js對象創(chuàng)建

* Author : 鐵木箱子

* Site : http://www.mzone.cc

* Date : 2010-10-14

* Version : 0.1

*/

function mzone(){};

/**

* Desc : 使用給定的對象路徑進行對象的創(chuàng)建

* Para : objPath - 對象路徑，字符串類型，格式為：xx.yy.zz

* Return : 沒有返回值,創(chuàng)建成功后直接使用對象路徑即可

*/

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、mzone.cc.iframe.js文件，iframe的自動高度調(diào)整

/**

* Title : iframe高度自動調(diào)整，適應各個瀏覽器（IE、Firefox、Chrome等）.需要注意的是在chrome下測試時必須在web容器中測試

* Author : 鐵木箱子

* Site : http://www.mzone.cc

* Date : 2010-10-14

* Version : 0.1

*/

/**

* Desc : 創(chuàng)建mzone.cc.iframe對象

*/

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

/**

* Desc : 定義對象mzone.cc.iframe的靜態(tài)方法實現(xiàn)iframe動態(tài)調(diào)整

* Para : iframe - 要調(diào)整的iframe對象，DOM對象

* extHeight - 自動計算iframe的高度后額外增加的高度值，數(shù)字型

* minHeight - iframe的最小高度，數(shù)字型

* Return : 沒有返回值

*/

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

iframe.style.display = "block";

if (iframe.contentDocument && iframe.contentDocument.body.offsetHeight) { // ff,chrome等

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.contentWindow.document.documentElement.scrollHeight) + 35;

h += extHeight;

if (h < minHeight) h = minHeight;

iframe.height = h + "px";

}

}

?? ? ?將以上兩個js保存并引入到頁面中就可以按照如下方法調(diào)用實現(xiàn)iframe的高度自動調(diào)整了：

var iframe = document.getElementById("iframe_body"); // iframe對象

var extHeight = 0; // 要額外增加的iframe的高度值

var minHeight = 300; // iframe的最小高度設置

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

?? ? ?以上腳本在IE、Firefox和Chrome下都測試通過，需要注意的是在google的Chrome瀏覽器中離線測試時是有錯誤的，需要在web容器（如apache或IIS）中進行測試才能夠看到效果。

附：適應各個瀏覽器的iframe高度自動調(diào)整示例下載

總結

以上是生活随笔為你收集整理的适应各个浏览器的iframe高度自动调整的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。