转载

DIV嵌套同域iframe的高度自适应

引子
父页面里控制子页面
子页面里控制父页面

一、引子

我们先看一个示例，有两个页面，1.html通过iframe嵌入2.html，两个页面都是同域的

1.html

<!DOCTYPE html>

<html>

<head>

<meta charset= 'utf-8' />

<title>1.html</title>

</head>

<body>

<iframe id= "ifr" src= "2.html" frameborder= "0" width= "100%" ></iframe>

</body>

</html>

2.html，很多P元素将高度撑高一些

<!DOCTYPE html>

<html>

<head>

<meta charset= "utf-8" >

<title>2.html</title>

</head>

<body>

<p>这是一个ifrmae，嵌入在http: //snandy.github.io/lib/iframe/1.html里 </p>

<p>根据自身内容调整高度</p>

<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>

</body>

</html>

此时，浏览器访问1.html，效果如图

DIV嵌套同域iframe的高度自适应

可以看到，嵌入的iframe出现了滚动条，需求是不想出现滚动条，页面多高就显示多少。我们不能随便给iframe设个高度，因为你不知道嵌入的iframe会有多高（内容是动态生成的）。

二、解决方法

解决方法其实很简单，无非是给1.html里的iframe设个高度，高度的值即为2.html的内容高度。要注意的是2.html的内容高度需要页面完全载入（onload）后获取。

有两种方式

A. JS代码写在父页面，即父页面（1.html）里获取子页面（2.html）文档对象，当iframe载入后（load）获取高度，将此高度值赋值给iframe标签

开始测试时使用iframe的contentWindow的load事件，但所有浏览器均不执行。最后使用iframe的load事件，在父页面1.html底部加入如下JS代码

<script type= "text/javascript" >

// 计算页面的实际高度，iframe自适应会用到

function calcPageHeight(doc) {

var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)

var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)

var height = Math.max(cHeight, sHeight)

return height

}

var ifr = document.getElementById( 'ifr' )

ifr.onload = function () {

var iDoc = ifr.contentDocument || ifr.document

var height = calcPageHeight(iDoc)

ifr.style.height = height + 'px'

}

</script>

这里有两个细节：

1. 取iframe内的文档对象，标准浏览器使用 contentDocument 属性，IE低版本(IE6,7,8)使用 document 属性。

2. calcPageHeight函数计算页面的实际高度，标准浏览器使用document.documentElement，低版本IE使用document.body，默认取clientHeight，出现滚动条的取scrollHeight，最后取两个值中最大的。

B. JS代码写在子页面，即子页面在window load后计算高度，将此高度值赋值给父页面的iframe

在子页面（2.html）底部加入如下代码

<script>

// 计算页面的实际高度，iframe自适应会用到

function calcPageHeight(doc) {

var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)

var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)

var height = Math.max(cHeight, sHeight)

return height

}

window.onload = function () {

var height = calcPageHeight(document)

parent.document.getElementById( 'ifr' ).style.height = height + 'px'

}

</script>

通过这两种方式都可以实现iframe的高度自适应，可以看到重新设置iframe的高度后，其滚动条都去掉了。

线上示例： http://snandy.github.io/lib/iframe/1.html

正文到此结束

所属分类：编程技术

本文标签： UI client 自适应 js 解决方法 git Document ip HTML 测试需求 http java 代码 src GitHub lib
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

DIV嵌套同域iframe的高度自适应

一、引子

1.html

二、解决方法

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流