设置HTML中的Iframe框架自适应高度

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大 家一种iframe动态调整高度的方法，主要是以下JS函数： 

一、程序代码

　

function SetWinHeight(obj)

　{

　 var win=obj;

　 if (document.getElementById)

　{

　 if (win && !window.opera)

　{

　 if (win.contentDocument && win.contentDocument.body.offsetHeight)

　win.height = win.contentDocument.body.offsetHeight;

　 else if (win.Document && win.Document.body.scrollHeight)

　win.height = win.Document.body.scrollHeight;

　}

　}

　}

最后，加入iframe,不能丢掉onload属性，当然了，id也必须也函数中的win匹配；

二、程序代码：

我们看看另一种情况的iframe解决方案
重要提示：src=中你必须填写的网页地址，一定要和本页面在同一个站点上，否则，会抱错，说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)现在给大家分享一下：

1、建立一个bottom.js的文件，然后输入下面的代码；
parent.document.all("框架ID名").style.height=document.body.scrollHeight;
parent.document.all("框架ID名").style.width=document.body.scrollWidth；

2、给你网站里所有的被包含文件里面每个都加入，在WINXP、IE6下面测试通过；

实现 iframe 的自适应高度
    实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象；

程序代码

<code class="as3 string">"text/javascript"</code> <code class="as3 plain">> </code> </div> <div class="line number2 index1 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number3 index2 alt2"> <code class="as3 comments">//** iframe自动适应页面 **// </code> </div> <div class="line number4 index3 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number5 index4 alt2"> <code class="as3 comments">//输入你希望根据页面高度自动调整高度的iframe的名称的列表 </code> </div> <div class="line number6 index5 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number7 index6 alt2"> <code class="as3 comments">//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。 </code> </div> <div class="line number8 index7 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number9 index8 alt2"> <code class="as3 comments">//定义iframe的ID </code> </div> <div class="line number10 index9 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number11 index10 alt2"> <code class="as3 variable">var</code> <code class="as3 plain"> iframeids=[</code> <code class="as3 string">"test"</code> <code class="as3 plain">] </code> </div> <div class="line number12 index11 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number13 index12 alt2"> <code class="as3 comments">//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 </code> </div> <div class="line number14 index13 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number15 index14 alt2"> <code class="as3 variable">var</code> <code class="as3 plain"> iframehide=</code> <code class="as3 string">"yes"</code> </div> <div class="line number16 index15 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number17 index16 alt2"> <code class="as3 color3">function</code> <code class="as3 plain"> dyniframesize() </code> </div> <div class="line number18 index17 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number19 index18 alt2"> <code class="as3 plain">{ </code> </div> <div class="line number20 index19 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number21 index20 alt2"> <code class="as3 variable">var</code> <code class="as3 plain"> dyniframe=</code> <code class="as3 keyword">new</code> <code class="as3 keyword">Array</code> <code class="as3 plain">() </code> </div> <div class="line number22 index21 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number23 index22 alt2"> <code class="as3 keyword">for</code> <code class="as3 plain"> (i=</code> <code class="as3 value">0</code> <code class="as3 plain">; i<iframeids.length; i++) </code> </div> <div class="line number24 index23 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number25 index24 alt2"> <code class="as3 plain">{ </code> </div> <div class="line number26 index25 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number27 index26 alt2"> <code class="as3 keyword">if</code> <code class="as3 plain"> (document.getElementById) </code> </div> <div class="line number28 index27 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number29 index28 alt2"> <code class="as3 plain">{ </code> </div> <div class="line number30 index29 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number31 index30 alt2"> <code class="as3 comments">//自动调整iframe高度 </code> </div> <div class="line number32 index31 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number33 index32 alt2"> <code class="as3 plain">dyniframe[dyniframe.length] = document.getElementById(iframeids); </code> </div> <div class="line number34 index33 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number35 index34 alt2"> <code class="as3 keyword">if</code> <code class="as3 plain"> (dyniframe && !window.opera) </code> </div> <div class="line number36 index35 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number37 index36 alt2"> <code class="as3 plain">{ </code> </div> <div class="line number38 index37 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number39 index38 alt2"> <code class="as3 plain">dyniframe.style.display=</code> <code class="as3 string">"block"</code> </div> <div class="line number40 index39 alt1"> <code class="as3 spaces">  </code>  </div> <div class="line number41 index40 alt2"> <code class="as3 keyword">if</code> <code class="as3 plain"> (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) </code> <code class="as3 comments">//如果用户的浏览器是NetScape </code> </div> <div class="line number42 index41 alt1"> <code class="as3 plain">dyniframe.height = dyniframe.contentDocument.body.offsetHeight; </code> </div> <div class="line number43 index42 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number44 index43 alt1"> <code class="as3 keyword">else</code> <code class="as3 keyword"> if</code> <code class="as3 plain">(dyniframe.Document && dyniframe.Document.body.scrollHeight) </code> <code class="as3 comments">//如果用户的浏览器是IE </code> </div> <div class="line number45 index44 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number46 index45 alt1"> <code class="as3 plain">dyniframe.height = dyniframe.Document.body.scrollHeight; </code> </div> <div class="line number47 index46 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number48 index47 alt1"> <code class="as3 plain">} </code> </div> <div class="line number49 index48 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number50 index49 alt1"> <code class="as3 plain">} </code> </div> <div class="line number51 index50 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number52 index51 alt1"> <code class="as3 comments">//根据设定的参数来处理不支持iframe的浏览器的显示问题 </code> </div> <div class="line number53 index52 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number54 index53 alt1"> <code class="as3 keyword">if</code> <code class="as3 plain"> ((document.all || document.getElementById) && iframehide==</code> <code class="as3 string">"no"</code> <code class="as3 plain">) </code> </div> <div class="line number55 index54 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number56 index55 alt1"> <code class="as3 plain">{ </code> </div> <div class="line number57 index56 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number58 index57 alt1"> <code class="as3 variable">var</code> <code class="as3 plain"> tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids) </code> </div> <div class="line number59 index58 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number60 index59 alt1"> <code class="as3 plain">tempobj.style.display=</code> <code class="as3 string">"block"</code> </div> <div class="line number61 index60 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number62 index61 alt1"> <code class="as3 plain">} </code> </div> <div class="line number63 index62 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number64 index63 alt1"> <code class="as3 plain">} </code> </div> <div class="line number65 index64 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number66 index65 alt1"> <code class="as3 plain">} </code> </div> <div class="line number67 index66 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number68 index67 alt1"> <code class="as3 keyword">if</code> <code class="as3 plain"> (window.addEventListener) </code> </div> <div class="line number69 index68 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number70 index69 alt1"> <code class="as3 plain">window.addEventListener(</code> <code class="as3 string">"load"</code> <code class="as3 plain">, dyniframesize, </code> <code class="as3 keyword">false</code> <code class="as3 plain">) </code> </div> <div class="line number71 index70 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number72 index71 alt1"> <code class="as3 keyword">else</code> <code class="as3 keyword"> if</code> <code class="as3 plain">(window.attachEvent) </code> </div> <div class="line number73 index72 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number74 index73 alt1"> <code class="as3 plain">window.attachEvent(</code> <code class="as3 string">"onload"</code> <code class="as3 plain">, dyniframesize) </code> </div> <div class="line number75 index74 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number76 index75 alt1"> <code class="as3 keyword">else</code> </div> <div class="line number77 index76 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number78 index77 alt1"> <code class="as3 plain">window.onload=dyniframesize </code> </div> <div class="line number79 index78 alt2"> <code class="as3 spaces">  </code>  </div> <div class="line number80 index79 alt1"> <code class="as3 plain">

源文地址：http://www.zzblo.com/study/html/714.html