用javascript动态调整iframe高度

     当你在页面上使用了iframe之后，一般来说会不希望iframe显示难看的滚动条，以使iframe里面的内容和主页面的内容浑然一体。这时候你会设置 scrolling="no" 属性。但是这样一来如果iframe里面的内容是变化的，高度会随之内容的变化而变化的时候，你的iframe就会显得太长导致底下一大片空白，或者正好相反，由于iframe的高度太小导致一部分内容会被挡住。这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度。如果需要调整宽度的话，原理是一样的。

 

1. <script language="Javascript">   
2.   
3. var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]   
4.   
5. //extra height in px to add to iframe in FireFox 1.0+ browsers   
6.   
7. var FFextraHeight=getFFVersion>=0.1? 16 : 0    
8.   
9.   
10. function dyniframesize(iframename) {   
11.   
12.   var pTar = null;   
13.   
14.   if (document.getElementById){   
15.   
16.     pTar = document.getElementById(iframename);   
17.   
18.   }   
19.   
20.   else{   
21.   
22.     eval('pTar = ' + iframename + ';');   
23.   
24.   }   
25.   
26.   if (pTar && !window.opera){   
27.   
28.     //begin resizing iframe   
29.   
30.     pTar.style.display="block"  
31.   
32.        
33.   
34.     if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){   
35.   
36.       //ns6 syntax   
37.   
38.       pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight;    
39.   
40.     }   
41.   
42.     else if (pTar.Document && pTar.Document.body.scrollHeight){   
43.   
44.       //ie5+ syntax   
45.   
46.       pTar.height = pTar.Document.body.scrollHeight;   
47.   
48.     }   
49.   
50.   }   
51.   
52. }   
53.   
54. </script>   

然后对于主页面用到iframe的地方添加代码：

2. <iframe id="myTestFrameID"    
3.   
4. onload="javascript:{dyniframesize('myTestFrameID');}"    
5.   
6. marginwidth=0 marginheight=0 frameborder=0    
7.   
8. scrolling=no src="http://www2.zeali.net/myiframesrc.php"    
9.   
10. width=200 height=100></iframe>