用javascript动态调整iframe高度

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

     首先,在你的主页面上必须包含以下这段javascript代码:

<script language="Javascript">
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion>=0.1? 16 : 0 

function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"

if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight; 
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
</script>

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

<iframe id="myTestFrameID" 
onload="javascript:{dyniframesize('myTestFrameID');}" 
marginwidth=0 marginheight=0 frameborder=0 
scrolling=no src="/myiframesrc.php" 
width=200 height=100></iframe>

 


真正的iframe 自适应高度,动态高度 js

百度搜索出来一大堆文章,我看了下没有一个合意的,什么叫动态?就是iframe加载的时候高度慢慢变啊,用户看到了才知道你的内容慢慢加载啊。网上说的都是在onload里设置高度,可是onload是加载完毕...
  • lanmanck
  • lanmanck
  • 2015年06月16日 19:10
  • 61471

jquery 子页面控制父页面IFRAME的高度

$(window.parent.document).find("#mainFrame").css("height",""+mainFrameheigth+"px");   jquery取得ifram...
  • qq_29663071
  • qq_29663071
  • 2017年04月18日 15:29
  • 3824

根据iframe框架中页面的实际高度动态改变iframe框架高度

各位是不是感觉标题很难看明白啊,其实这个标题通俗的讲就是iframe框架自适应框架内页面的高度,防止出现动态增加页面内容后,部分页面内容显示不出来的问题。 大概的思路就是,通过获取框架内页面的wind...
  • zzh94352201
  • zzh94352201
  • 2016年12月07日 11:15
  • 2561

关于iframe自适应高度的方法总结

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候...
  • hj7jay
  • hj7jay
  • 2016年06月15日 00:08
  • 2850

html iframe自适应高度的多种方法方法小结

对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的...
  • qilixiang012
  • qilixiang012
  • 2014年07月21日 16:48
  • 1433

iframe高度自适应、载入完成事件

高度自适应 ------------------------------------------------- 方法一: 经典代码 iFrame 自适应高度,在IE6/IE7/IE8...
  • rdhj5566
  • rdhj5566
  • 2014年07月31日 09:19
  • 1186

Js动态获取iframe子页面的高度总结

问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结。 方法1:父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的,通过获取子级页面的高度给ifram...
  • u013909970
  • u013909970
  • 2015年07月29日 11:02
  • 731

动态调整UITableViewCell高度的实现方法

动态调整UITableViewCell高度的实现方法 有时我们需要动态调整UITableViewCell的高度,根据内容的不同设置不同的高度,以前看到一种实现方法,写得有点麻烦,具体地址找不...
  • msyqmsyq
  • msyqmsyq
  • 2016年03月09日 08:45
  • 1201

原创,真正解决iframe高度自适应的问题.兼容各浏览器

在Google输入关键字"iframe自适应高度"之后你会发现有"找到约 153,000 条结果",我大概的看了一下,发现基本上就那两三篇文章被转载来转载去.真正解决问题的没有.那我今天就不和他们同流...
  • sibang
  • sibang
  • 2014年08月21日 16:48
  • 1297

JavaScript动态设置table的高度

这两天在调测系统的兼容性时遇到一个设置table高度的问题,页面功能很简单,就是页面中央一个文件,文件下方有一个保存按钮,文件内可以点击“添加项目按钮”来在该文件内增加表格数(这就意味着文件的高度随时...
  • lmb55
  • lmb55
  • 2016年03月22日 00:02
  • 5030
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用javascript动态调整iframe高度
举报原因:
原因补充:

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