转载自：iframe的高度自适应_iframe自适应高度-CSDN博客
现在有这样一个情景：a页面需用使用iframe嵌入b页面，而b页面的内容高度是不固定的，有可能是300px,有可能是500px......，这时候我要求在a页面嵌入b页面的区域不能有垂直滚动条，怎么实现呢？很显然，因为被嵌入的b页面高度是不确定的，我们在使用iframe的时候就不能固定iframe这个元素的高度，而是应该写为100%。好，下面我还是用最简单的例子来验证如何完美的解决iframe高度自适应的问题。
a页面的html结构：
<div id="cont">
<iframe id="tab_iframe" src="iframe_embed.jsp" frameborder="0" height="100%" width="100%"></iframe>
</div>
b页面的html结构：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>被嵌入的页面</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/rs/js/jquery-1.12.4.min.js"></script>
<style type="text/css">
.div1{
border: 1px solid black;
}
</style>
</head>
<body>
<div class="div1">
<p>我是被嵌入的页面</p>
<p>我是被嵌入的页面</p>
<p>我是被嵌入的页面</p>
<p>我是被嵌入的页面</p>
<p>我是被嵌入的页面</p>
<p>我是被嵌入的页面</p>
<p>我是被嵌入的页面</p>
<p>我是被嵌入的页面</p>
</div>
</body>
</html>
这时候是有滚动条的，怎么解决呢？考虑在iframe加载完成之后重新设置iframe的高度，在a页面中加入如下js：
document.getElementById('tab_iframe').onload =function () {
adjustHeight();
};
function adjustHeight() {
var iframeEle = $("#tab_iframe").get(0);
// contentDocument:获取iframe的document对象 contentWindow:获取iframe的window对象
var iframeDocumentObj = iframeEle.contentDocument || iframeEle.contentWindow.document;
var height = $(iframeDocumentObj).find("html").outerHeight(true)+30;
$("#tab_iframe").height(height);
}
再刷新a页面，可以看到已经达到了我想要的效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
