如上图,根据我文章的展示数量,iframe的高度自适应。网上看了很多博客,基本拿来不能用,可能是每个人在使用的具体情况不一样,所以本文我会具体讲述下我是怎么用iframe的,html及js我都会详细贴上来。
主页面的html代码:
<!--右边栏-->
<div class="col-md-8 cb " style="margin-left: 10px">
<iframe src="show/mainContent.jsp" id ="iframe" frameborder="0" scrolling="no" width="100%" ></iframe>
</div>
子页面的html代码:
<body>
<div class="container">
<div class="row">
//此处用来展示文章,通过js动态从后台获取文章,再生成前端展示代码
<div class="row1"></div>
<div class="col-md-12 right-box">
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
</div>
</body>
子页面的js代码:
<script>
$(function(){
/*获取文章*/
var page = 1;
$.get("/blog/getArticleList?limit=5&page="+page,function(result){
console.log("展示");
$.each(result.data,function(i,obj){
/*alert(i+"==="+obj.atittle)*/
var divChild = '<div class="col-md-12 cb bor right-box" style="height: 150px;"><article><header><h3 class="article-title">'+obj.atittle+' </h3> <div class="article-content">'+obj.acontent+'</div></header><div class="attribute"><p style="display:inline-block"><span class="date">2019-08-11 23:22:55</span></p> <span>|</span> <p style="display:inline-block"><span>阅读数<span>500</span></span></p><span>|</span><p style="display:inline-block"><span>留言<span>10</span></span></p></div></article></div>'
$(".row1").append(divChild)
});
},"json");
})
</script>
通过以上三处的代码显示的结果如下(此时还未实现自适应):
网上那么多教程,我看了下,基本网上的思路都是等iframe加载完成后,通过js获取iframe子页面内容的高度,再设置给iframe,这几步都是在主页面js实现的。大部分我这里不适用的原因,就是因为我的展示文章的前端代码是动态生成的,获取子页面内容高度有问题。既然这样,那我就等子页面加载完成,再去设置iframe高度。
思路:在子页面加载数据完成后,获取当前子页面内容高度,反过来设置给iframe(即主页面处的iframe元素)。
步骤:
如上图,我在子页面加载完所有内容后,让它设置高度。
成功!