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