用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>

 


相关文章推荐

EasyUI中iframe嵌入页面,包含datagrid数据动态绑定,页面内容的高度自适应问题

在我起初定义的tabs中,我想点击链接后跳出我的datagrid页面,涉及到datagrid的定义,数据的绑定,还有页面的适应高度问题....

怎么让动态的 iframe 高度自适应里面内容

这里加载了两个不同内容高度的页面至iframe中   1. 没有设置高度   div class="iframe-wrapper"> iframe n...

jsp页面跳转到子页面和返回上一页,附带动态改变父页面的iframe高度大小

前言        在工作中我们经常会遇到页面跳转,传参来实现复杂的业务逻辑.接下来,本文将分享自己在实践中应用的一个jsp页面跳转,动态改变主页面高度的例子来说明如何使用iframe标签. 1.在...

iframe高度动态自适应

一、前言碎碎念 我从来对iframe就没有什么好感,对其基本上是不屑一顾。但是人在江湖,身不由己。经理发话,新功能使用iframe实现,没办法,只好折腾,两大烦人的东西,一是带遮罩的弹框提示,而...

设置iframe的高度和控制其所在层的边框动态显示

文件使用了模板页,可以将中间部分剥离出来. 要实现的效果如下: 上图中的树形目录与右侧的操作界面中间的分隔线的如何显示: 分隔线的左侧是一个div层,其内嵌一个iframe框架,因此它的高度...

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

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

让iframe根据内容自动调整高度~~~

iframe在网页中经常用到,尤其是不想用框架却想具有框架一样的导航与显示效果的时候。不用框架的原因,有时是受布局图片的限制,不太好划分矩形区域,比较适合用表格背景图片自动伸缩的形式,我最近就碰到一例...

动态调整iframe页面的大小

          在做网页的时候,经常会遇到希望,在父页面内有一个iframe能自动根据载入页面的大小而动态调整页面大小。特此记录下解...

JavaScript动态设置table的高度

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

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