实现 iFrame自适应高度，原来很简单！

最新推荐文章于 2024-08-28 14:23:26 发布
原创 最新推荐文章于 2024-08-28 14:23:26 发布 · 416 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#iframe
本文介绍了一种使IFrame自适应其内容高度的方法，通过使用onload事件动态调整iframe的高度，确保iframe能够根据内部文档的实际高度进行伸缩。

< iframe   id ="iFrame1"  name ="iFrame1"  width ="100%"  onload ="this.height =iFrame1.document .body.scrollHeight"  frameborder ="0"  src ="index.htm" ></ iframe >
看到了吧，关键就在于onload="this.height=iFrame1.document.body.scrollHeight"！

iframe自动适应高度（完美自适应高度嵌套代码），兼容目前主流浏览器。
08-12
iframe自动适应高度，很难得的资源，很多下载的都是部分浏览器可以用，这个可以兼容360.ie6789等，遨游，火狐。搜狗等浏览器。。亲自测试。
6种iframe高度自适应的方法
热门推荐
web前端开发
03-12 3万+
js自适应高度，实际上就是设置iframe的高度，设置等于内嵌网页的高度，从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度，同样可以...
iframe自适应高度
zhu_menglu的博客
04-12 5314
其中，padding-bottom的值需要根据iframe的宽高比来计算，例如，如果iframe的宽高比为16:9，则padding-bottom的值为56.25%（9除以16乘以100%）。可以设置iframe标签的高度为0，然后使用padding-bottom属性来设置iframe标签的高度，使其按照原来的比例自适应。这样，当浏览器窗口大小改变时，iframe标签的高度会自动按照原来的比例进行调整，从而实现自适应效果。
iframe 自适应设备高度
最新发布
2301_77113835的博客
08-28 1678
这样，无论设备的高度变化，都会自动调整iframe的高度以适应设备。
iframe的高度自适应
xiaozhuangyumaotao的博客
04-17 6678
现在有这样一个情景：a页面需用使用iframe嵌入b页面，而b页面的内容高度是不固定的，有可能是300px,有可能是500px......，这时候我要求在a页面嵌入b页面的区域不能有垂直滚动条，怎么实现呢？很显然，因为被嵌入的b页面高度是不确定的，我们在使用iframe的时候就不能固定iframe这个元素的高度，而是应该写为100%。好，下面我还是用最简单的例子来验证如何完美的解决iframe高度...
iframe自适应高度（随内容高度变化）
weixin_50641294的博客
05-25 6622
由于需求需要把一个项目的页面嵌套到另外一个页面，但是iframe高度不能写死，所以要让iframe高度自适应 1.解决思路： 获取嵌套页面的高度，把高度赋值给父页面的iframe 代码实现 1.首先在嵌套页面获取父级ifram元素 let iframeDom = parent.parent.document.getElementById("iframe") 2.获取嵌套页面高度 let box = document.getElementById("box") 3.把页面高度复制给父级ifram iframe
实现iFrame自适应高度，原来很简单！
CSDN_heyi_2016的博客
09-24 9406
实现iFrame自适应高度，原来很简单！ <iframeid="iFrame1"name="iFrame1"width="100%"onload="this.height=iFrame1.document.body.scrollHeight"frameborder="0"src="index.htm"></iframe>看到了吧，关键就在于onlo...
实现iframe自适应高度，原来很简单！
记录、分享
08-21 597
看到了吧，关键就在于onload="this.height=iFrame1.document.body.scrollHeight"！ http://www.cnblogs.com/skywind/archive/2007/07/24/829550.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值