實現iframe高度自適應

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

 



 

showMore
相關文章
相關標籤/搜索