iframe自适应大小

<script language="javascript">
<!--
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;
}
}
}
-->
</script>


<iframe width="200" src="/1.html" id="JKPlus_win" name="JKPlus_win" scrolling="no" frameborder="0" onload="Javascript:SetWinHeight(this)"></iframe>

在有些时候,我们使用iframe来将一个页面嵌入到另一个页面中,但是由于这个页面的高度不固定,所以嵌入那个页面会出现滚动条。这种方式的解决办法是使用iframe自适应大小,让嵌入页中不出现滚动条。
<iframe name=ifm2 width="100%" onload="style.pixelWidth=ifm2.document.body.scrollWidth;this.style.pixelHeight=ifm2.document.body.scrollHeight" src="./news2.asp?id=1" frameBorder=0 scrolling=no></iframe>

有时在项目中会遇到通过在页面中采用iframe的方式include其它页面,这时就会考虑不要因出现滚动条而影响页面效果,但include页面的内容高度是未知的,所以大家都会利用javascript来解决这个问题。
在网上曾看见过解决此问题的代码,不过拷贝到本地进入调试时有些不正常,在IE下无法正确获得嵌套页面的高度,通过各种尝试,最终代码如下:

  1. <script type="text/javascript">
  2. function SetCwinHeight(iframeObj){
  3. if (document.getElementById){
  4.    if (iframeObj && !window.opera){
  5.    if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){
  6.    iframeObj.height = iframeObj.contentDocument.body.offsetHeight;
  7.    }else if(document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){
  8.    iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight;
  9.    }
  10.    }
  11. }
  12. }
  13. </script>
  14. <iframe width="100%" name="frameContent" onload="SetCwinHeight(this)" frameborder="0" src="*"></iframe>

扩展:

在一个页面含有某个iframe,其id="myframe" name="myframe",此时使用document.getElementById("myframe")取到的是iframe标签对象,通过该对象可以获取iframe的各个属性,例如src、frameborder、style等等,但是不能获取到iframe所包含的子页面的各个对象。如果使用document.frames("myframe")取到的是iframe组件对象,通过该对象可以获取到iframe所包含的页面的子页面的各个对象,例如子页面的window对象,但是不能获得iframe标签得各个属性,例如上面说到的src等等。

posted on 2008-08-22 15:40  风乔  阅读(624)  评论(0编辑  收藏  举报

导航