用javascript动态调整iframe高度

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

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

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的地方添加代码：

用javascript动态调整iframe高度相关推荐

用javascript 动态改变iframe 的src 属性
原文地址为: 用javascript 动态改变iframe 的src 属性 <iframe id="xx"></iframe> <iframe id= ...
【Javascript】Javascript动态设置页面高度
1.动态设置父页面iframe高度 <body onload="iframeHeight()"><script type="text/javascrip ...
HTML如何设置幻灯片大小和位置,javascript – 动态调整skitter幻灯片图像大小
如何将幻灯片图像调整(缩放)到 jquery或css或其他任何方式的不同大小? 它总是加载主图像的全宽和高度,并用以下方式控制不起作用. 可以通过以下示例代码调整图像滑块容器的大小,但如果图像大于53 ...
JavaScript自动设置IFrame高度(兼容各主流浏览器)
调用方式如下 <iframe id="ifm" name="ifm" οnlοad="SetIFrameHeight('ifm')" ...
js随着浏览器窗口变化动态调整表格高度
var height = tdHeight * (tdMaxCount - Math.round((winMaxHeight - $(window).height()) / tdHeight)); t ...
Cesium开发：调整3dtile高度
在3dtile的制作过程中,如果原始的数据中,模型数据存在高程,在生成的3dtile中也会存在高程的信息,这时就需要在系统中,底图数据的高程也要存在,这样才能和3dtile进行匹配,不过,Cesium ...
iframe高度动态自适应
参考:http://www.zhangxinxu.com/wordpress/?p=1294 一.前言碎碎念我从来对iframe就没有什么好感,对其基本上是不屑一顾.但是人在江湖,身不由己.经理发话 ...
iOS学习之路十三（动态调整UITableViewCell的高度）
大概你第一眼看来,动态调整高度是一件不容易的事情,而且打算解决它的第一个想法往往是不正确的.在这篇文章中我将展示如何使图表单元格的高度能根据里面文本内容来动态改变,同时又不必子类化UITableVie ...
UITableViewHeader 动态调整高度
首先,标题党一枚,UITableViewHeader 是没有办法动态调整 But,我们可以通过重新赋值 Header 来达到动态调整的效果示例需求:header包含一个动态文本标签,具体内容多少可 ...

用javascript动态调整iframe高度

用javascript动态调整iframe高度相关推荐

最新文章

热门文章