使用iframe嵌套，实现使iframe高度与iframe中内容高度一致。使iframe中的内容直接全部展示，不用滑动。

最新推荐文章于 2024-08-17 19:33:31 发布

原创最新推荐文章于 2024-08-17 19:33:31 发布 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #js

前端专栏收录该内容

4 篇文章

订阅专栏

该博客介绍了使用JS解决iframe高度自适应的方法。思路是在iframe标签上用onload绑定方法，待iframe内容加载完成，通过JS将iframe高度设为与内容高度一致，还给出了相应的HTML和JS代码。

前言

项目中遇到统计页面需要嵌套，但是在主页面又要展示数据的完整性——直接、全部、操作不冗余在使用iframe中会因为其本身的性质失去主页面要求的完整性。

一、解决

1.思路：在iframe标签上使用onload绑定方法，当iframe中内容加载完成后，通过js的方法将iframe的高度与iframe中内容的高度设置为一致。

在这里插入图片描述
onload具体讲解

2.代码：

html：

<iframe id="iframe" src="@{/newStatistics/statistics}" frameborder="0" onload="iframeLoad()"> </iframe>

js：

function iframeLoad()
{
	//先将iframe高度设置为0
    document.getElementById("iframe").style.height=0+"px";
    //将iframe高度设置为其内容的高度
    document.getElementById("iframe").style.height=document.getElementById("iframe").contentWindow.document.body.scrollHeight+"px" ;
}