实现iframe高度自适应

iframe高度自适应使用场景是类似于微博,新闻等点击加载更多这种功能实现，要求iframe的高度能够跟随内容的变化而变化。

父html文件，也就是引用ifram的文件
src="blog/blog.display.html"  引用的文件
id="blog-display" 全局唯一ID
scrolling="no" 去除滚动条
<iframe src="blog/blog.display.html" id="blog-display" scrolling="no" >
</iframe>

被引用的Html文件

blog.display.html

<html>
　  <head>
　　　　<script src="blog.display.js"></script>    
　　</head>
    <body>
        <div id="content"></div>
        <body id="more-btn">加载更多</body>
    </body>
</html>

 

blog.display.js  
注意这里使用的id（blog-display）为父iframe 中的 ID。
就是将body的scrollHeight赋给父iframe 的高度height.
$("#more-btn").click(function(){
   IFrameResize(); 
   var  text = "<div stype='backgroung-clour：red; height:100px;'></div>"
　　$("#content").append(text);      
})
function() IFrameResize(){
       //alert(this.document.body.scrollHeight); //弹出当前页面的高度
            var obj = parent.document.getElementById("blog-display"); //取得父页面IFrame对象
            //alert(obj.height); //弹出父页面中IFrame中设置的高度
            obj.height = document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度 
    },

 



 

showMore
posted @ 2019-02-22 13:05  冬眠的山谷  阅读(4961)  评论(1)  编辑  收藏  举报