iframe自适应高度

本文介绍了一种通过JavaScript实现IFrame自适应高度的方法。该方法能够动态调整IFrame的高度以匹配其内容的实际高度,避免了因固定高度设置不当导致的内容显示不全或出现多余空白的问题。

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

ContractedBlock.gifExpandedBlockStart.gif代码
<script language="javascript" type="text/javascript">
function getDocHeight(doc){
//在IE中doc.body.scrollHeight的可信度最高
//在Firefox中,doc.height就可以了
var docHei = 0;
var scrollHei;
//scrollHeight
var offsetHei;//offsetHeight,包含了边框的高度

if (doc.height){
//Firefox支持此属性,IE不支持
docHei = doc.height;
}
else if (doc.body){
//在IE中,只有body.scrollHeight是与当前页面的高度一致的,
//其他的跳转几次后就会变的混乱,不知道是依照什么取的值!
//似乎跟包含它的窗口的大小变化有关
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight;
if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight;
}
else if(doc.documentElement){
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight;
if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight;
}
/*
docHei = Math.max(scrollHei,offsetHei);//取最大的值,某些情况下可能与实际页面高度不符!
*/
return docHei;
}
function doReSize(){
var iframeWin
= window.frames['Main'];
var iframeEl
= window.document.getElementById? window.document.getElementById('Main'): document.all? document.all['Main']: null;
if ( iframeEl && iframeWin ){
var docHei
= getDocHeight(iframeWin.document);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
}
else if(iframeEl){
var docHei
= getDocHeight(iframeEl.contentDocument);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
}
}

function runResizeTask(){
doReSize();
setTimeout(
"runResizeTask()",1000);//每隔1秒执行一次
}
runResizeTask();
</script>

转载于:https://www.cnblogs.com/zhengjuzhuan/archive/2010/02/09/1666275.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值