iframe高度自适应

最新推荐文章于 2023-04-12 10:09:10 发布

别把BUG不当代码

最新推荐文章于 2023-04-12 10:09:10 发布

阅读量395

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_41623154/article/details/102478010

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如上图，根据我文章的展示数量，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="#">&laquo;</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="#">&raquo;</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元素）。

步骤：

如上图，我在子页面加载完所有内容后，让它设置高度。

成功！

别把BUG不当代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe高度自适应

如上图，根据我文章的展示数量，iframe的高度自适应。网上看了很多博客，基本拿来不能用，可能是每个人在使用的具体情况不一样，所以本文我会具体讲述下我是怎么用iframe的，html及js我都会详细贴上来。主页面的html代码：  <div class="col-md-8 cb " style="margin-left: 10px...
复制链接

扫一扫