现在有这样一个情景：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>
到目前为止，访问a页面的效果如图所示：
这时候是有滚动条的，怎么解决呢？考虑在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页面，可以看到已经达到了我想要的效果：
但是现在还有一个问题，如果在被嵌入的b页面中与后台有交互，且这种交互比较费时，在b页面div1里面加入一个段落用来存放后台返回的结果，修改后的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>
<p id="result"></p>
</div>
<script>
$.get("getData",function (data) {
$("#result").html(data.text);
});
</script>
</body>
</html>
其中getData为后台url，java代码如下：
@RequestMapping("/getData") @ResponseBody
public Map<String, Object> getData(HttpServletRequest request){
Map<String, Object> map=new HashMap<String, Object>();
try {
Thread.sleep(5000);//模拟耗时的业务逻辑
}catch (Exception e){
e.printStackTrace();
}
map.put("text", "java后<br>台<br>经<br>过<br>一<br>番<br>运算之后返回的数据");
return map;
}
这时候页面又有滚动条了：
怎么解决这种情况呢？这时候只需要修改一下被嵌入的b页面的js就可以了：
$.get("getData",function (data) {
$("#result").html(data.text);
parent.adjustHeight();//在数据返回之后再调用一下a页面设置iframe高度的函数
});
这样之后，看下效果：
到此为止，就可以完美解决iframe高度自适应的问题