用javascript动态调整iframe高度

最新推荐文章于 2021-08-04 15:35:58 发布

yxtyxt3311

最新推荐文章于 2021-08-04 15:35:58 发布

阅读量1.7k

点赞数

分类专栏： JAVASCRIPT 文章标签： iframe javascript firefox ie function 脚本

JAVASCRIPT 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个兼容IE/NS/Firefox浏览器的JavaScript脚本，该脚本能够实现在页面加载完成后动态调整iframe的高度，以确保内容完全显示且不留下多余空白。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前在页面上使用了iframe，没有设置iframe的高度，IE游览器看起来相当正常，可用Firefox来测试就出现问题了，iframe界面的内容不能完全显示出来，后来设置了iframe高度，也不是很可行，不知道内容多少很难控制，有些地方就空出一大片。后用GOOLG取得一个很好的办法，这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度。

第一步：在含有iframe的主页面<HEAD> </HEAD>间插入以下这段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>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。