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