iframe页面调用高度自适应方法代码，兼容IE,FF

最新推荐文章于 2022-01-05 11:06:13 发布

iteye_12415

最新推荐文章于 2022-01-05 11:06:13 发布

阅读量110

点赞数

分类专栏： js 文章标签： IE JavaScript Opera ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_12415/article/details/81601367

版权

js 专栏收录该内容

7 篇文章

订阅专栏

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

<script type="text/javascript"> 
function SetCwinHeight(iframeObj){ 
  if (document.getElementById){ 
   if (iframeObj && !window.opera){ 
    if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){ 
     iframeObj.height = iframeObj.contentDocument.body.offsetHeight; 
    }else if(document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){ 
     iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight; 
    } 
   } 
  } 
} 
</script> 
<iframe width="100%" name="frameContent" οnlοad="SetCwinHeight(this)" frameborder="0" src="http://www.56ui.com"></iframe>

扩展：

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