iframe自适应高度（随内容高度变化）

最新推荐文章于 2025-05-18 13:16:54 发布

小宋i

最新推荐文章于 2025-05-18 13:16:54 发布

阅读量6.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_50641294/article/details/124964967

本文介绍了一种使iframe能够自适应其嵌套内容高度的方法。通过JavaScript获取子页面的高度，并将其赋值给父页面的iframe高度，实现了iframe高度的动态调整。

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

由于需求需要把一个项目的页面嵌套到另外一个页面，但是iframe高度不能写死，所以要让iframe高度自适应

1.解决思路：获取嵌套页面的高度，把高度赋值给父页面的iframe

代码实现

1.首先在嵌套页面获取父级ifram元素
let iframeDom = parent.parent.document.getElementById("iframe")
2.获取嵌套页面高度
let box = document.getElementById("box")
3.把页面高度复制给父级ifram
iframeDom.height = box.scrollHeight

如果想让它随时变换高度，加个定时器