如何实现iframe(嵌入式帧)的自适应高度

原创 2004年09月09日 23:11:00

好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个函数,贴到页面里面就能用了。不敢独享,大家要是觉得有用,欢迎使用

源代码如下

<script type="text/javascript">
 //** iframe自动适应页面 **//

 //输入你希望根据页面高度自动调整高度的iframe的名称的列表
 //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。

 //定义iframe的ID
 var iframeids=["test"]

 //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏
 var iframehide="yes"

 function dyniframesize()
 {
  var dyniframe=new Array()
  for (i=0; i<iframeids.length; i++)
  {
   if (document.getElementById)
   {
    //自动调整iframe高度
    dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
    if (dyniframe[i] && !window.opera)
    {
     dyniframe[i].style.display="block"
     if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
      dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
     else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE
      dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
    }
   }
   //根据设定的参数来处理不支持iframe的浏览器的显示问题
   if ((document.all || document.getElementById) && iframehide=="no")
   {
    var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
    tempobj.style.display="block"
   }
  }
 }

 if (window.addEventListener)
 window.addEventListener("load", dyniframesize, false)
 else if (window.attachEvent)
 window.attachEvent("onload", dyniframesize)
 else
 window.onload=dyniframesize
</script>

使用的时候只要贴在<head></head>里面就可以了

CSS 如何让 height:100%; 起作用

当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗? 按常理,当...
  • u014520745
  • u014520745
  • 2016-09-18 14:25:22
  • 18338

js操作 ifarm contentWindow属性

document.getElementByid("AAA"),查找页面中id=“AAA”的选项。 在页面中frameset将页面分为多个窗口 AAA" src="xxxA.html" /> ...
  • vm021
  • vm021
  • 2015-10-16 09:54:08
  • 1764

iframe 自适应高度

  • 2011年06月22日 08:21
  • 702B
  • 下载

iframe自适应高度说明文档

  • 2011年06月11日 15:52
  • 3KB
  • 下载

关于Div的宽度与高度的100%设定

正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从...
  • haluoluo211
  • haluoluo211
  • 2016-05-08 16:37:19
  • 9490

ios view的frame和bounds之区别(位置和大小)

前言: 学习ios开发有一段时间了,项目也做了两个了,今天看视频,突然发现view的frame和bound两个属性,发现bound怎么也想不明白,好像饶你了死胡同里,经过一番尝试和思考,终于弄明白b...
  • mad1989
  • mad1989
  • 2013-03-24 01:43:57
  • 126167

如何实现iframe(嵌入式帧)的自适应高度(转载)

     好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄...
  • springInJava
  • springInJava
  • 2005-09-12 16:59:00
  • 1121

iframe自适应高度

  • 2010年01月08日 23:02
  • 653B
  • 下载

【HTML/JS】实现iFrame自适应高度,原来很简单!

http://www.cnblogs.com/skywind/archive/2007/07/24/829550.html 看到了吧,关键就在于onload="this.height=iFram...
  • CrackLibby
  • CrackLibby
  • 2016-06-16 17:57:31
  • 538

iframe跨域自适应高度模板

  • 2011年02月16日 09:51
  • 1KB
  • 下载
收藏助手
不良信息举报
您举报文章:如何实现iframe(嵌入式帧)的自适应高度
举报原因:
原因补充:

(最多只允许输入30个字)