iframe高度根据内容变化

我们在使用iframe的时候，iframe的高度并不会根据内容的多少来改变它的高度，如何让它根据内容来改变它的高度呢？在网上也找了好多代码，觉得下面这段代码是最有效的：

 1 var browserVersion = window.navigator.userAgent.toUpperCase();
 2     var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
 3     var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
 4     var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
 5     var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
 6     var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
 7     var isIE9More = (! -[1, ] == false);
 8 
 9 
10     function reinitIframe(iframeId, minHeight) {
11         try {
12             var iframe = document.getElementById(iframeId);
13             var bHeight = 0;
14             if (isChrome == false && isSafari == false)
15                 bHeight = iframe.contentWindow.document.body.scrollHeight;
16 
17             var dHeight = 0;
18             if (isFireFox == true)
19                 dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
20             else if (isIE == false && isOpera == false)
21                 dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
22             else if (isIE == true && isIE9More) {//ie9+
23                 var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
24                 if (heightDeviation == 0) {
25                     bHeight += 3;
26                 } else if (heightDeviation != 3) {
27                     eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
28                     bHeight += 3;
29                 }
30             }
31             else//ie[6-8]、OPERA
32                 bHeight += 3;
33 
34             var height = Math.max(bHeight, dHeight);
35             if (height < minHeight) height = minHeight;
36             iframe.style.height = height + "px";
37         } catch (ex) { }
38     }
39     function startInit(iframeId, minHeight) {
40         eval("window.IE9MoreRealHeight" + iframeId + "=0");
41         window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
42     }
43     var minHeight = $(window).height();
44     startInit('mainframe', minHeight);

 

html的源代码如下，index.html是你要引用的页面：

1 <iframe src="index.htm" width="100%" height="100%" frameborder="0" name="mainframe" id="mainframe" scrolling="no"></iframe>

 

Save

Save