實現iframe高度自適應

時間 2019-12-09

原文原文鏈接

iframe高度自適應使用場景是相似於微博,新聞等點擊加載更多這種功能實現，要求iframe的高度可以跟隨內容的變化而變化。html

父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文件app

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的高度爲此頁面的高度 
    },