装载iframe 子页面,自适应高度

本文介绍了一种在不同浏览器中调整iframe高度的技术方案。通过监听iframe加载完成事件并修改父页面中iframe的高度,确保内容能够完全展示,同时解决了Firefox和IE6等浏览器间的兼容性问题。

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

<iframe name="google_ads_frame" marginwidth="0" marginheight="0" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-4490194096475053&amp;dt=1226297516828&amp;lmt=1226285428&amp;prev_slotnames=1891601125&amp;output=html&amp;slotname=3685991503&amp;correlator=1226297516796&amp;url=http%3A%2F%2Fwww.corange.cn%2Farchives%2F2008%2F08%2F1473.html&amp;ea=0&amp;ref=http%3A%2F%2Fwww.corange.cn%2Fhtml%2Fcorange__78.html&amp;frm=0&amp;ga_vid=2044451421.1225934970&amp;ga_sid=1226297173&amp;ga_hid=1850330472&amp;ga_fc=true&amp;flash=9.0.124.0&amp;u_h=768&amp;u_w=1024&amp;u_ah=715&amp;u_aw=1024&amp;u_cd=32&amp;u_tz=480&amp;u_java=true" frameborder="0" width="300" scrolling="no" height="250" allowtransparency></iframe>
假设主页面有一个div,里面放置一个iframe
<div id="frameBox">
<iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no"></iframe>
</div>
3个菜单链接,分别在iframe加载 1.html、2.html、3.html 三个页面。

3个子页面分别在自己页面加载完window.onload执行
function aa(){
var newHeight = document.body.scrollHeight + 20 + "px";
window.parent.document.getElementById("frameBox").style.height = newHeight;
//以上firefox通过,但是ie6必须加上下面这句,不然iframe高度是改了,但是可见区域没有改
window.parent.document.getElementById("frameWin").style.height = newHeight;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值