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

标签： div iframe 高度 | 发表时间：2015-09-22 19:59 | 作者：summer85
出处：http://www.iteye.com
  1. 引子
  2. 父页面里控制子页面
  3. 子页面里控制父页面

 

一、引子

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

1.html

1
2
3
4
5
6
7
8
9
10
<!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元素将高度撑高一些

1
2
3
4
5
6
7
8
9
10
11
12
<!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，效果如图

可以看到，嵌入的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代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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）底部加入如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<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



已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [div iframe 高度] 推荐：

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

- - 编程语言 - ITeye博客
我们先看一个示例，有两个页面，1.html通过iframe嵌入2.html，两个页面都是同域的. 2.html，很多P元素将高度撑高一些.

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

.

根据自身内容调整高度

.

三谈Iframe自适应高度

- xiao - Koubei UED Team
一是因为这真的是一个被说烂的话题，二是因为太师傅在n年前就写过这篇再谈iframe自适应高度. 之所以再提该问题，是因为之前项目中确实遇到了这个问题的方方面面，有必要总结一下. 希望对各位有帮助，有错误请指正. 同域、子页面高度不会动态增加. 这种情况最简单，直接通过脚本获取字页面实际高度，修改iframe元素高度即可.

jq 解决iframe高度自适应。

- - Web前端 - ITeye博客
已有 0 人发表留言，猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

jquery 实现iframe 自适应高度

- - Web前端 - ITeye博客
引用：http://www.cnblogs.com/luluping/archive/2009/04/17/1437843.html. 超级简单的方法，也不用写什么判断浏览器高度、宽度啥的. 一个是放在和iframe同页面的，一个是放在test.html页面的. iframe代码，注意要写ID. jquery代码１：.

css 控制div高度自适应浏览器的高度

- - 博客园_首页
css 控制div高度自适应浏览器的高度. 20 这里是内容容这里是内容. 25 这里是内容这里是内容. 35 这里是内容这里是内容. 43 这里是内容这里是内容. 48 这里是内容这里是内容. 55 这里是内容容这里是内容. 57 这里是内容这里是内容. 64 这里是内容容这里是内容.

三种Div高度自适应的方法

- - CSDN博客Web前端推荐文章
让DIV高度自适应，这是在网页设计中常遇到的问题，为了给大家提供参考，这里提供3种div高度自适应的方法：一是JS法、二是背景图填充法、三是“补丁大法”（比较变态）. 原理：用JS判断左右DIV的高度，若不一致则设为一致. 这是大站用得比较多的方法，如163等，研究了一下，结果如下. 这里是给父DIV设置了背景图片填充，所有DIV都不设高度.

iframe子父页面调用

- - CSDN博客Web前端推荐文章
1、iframe子页面调用 父页面js函数. 子页面调用父页面函数只需要写上window.praent就可以了. 子页面取父页面中的标签中的值，比如该标签的id为“test”,则：. 但是我在chrome浏览器下却发现此方法无效了. 查了半天才了解，在chrome 5+中，window.parent无法在file://协议中运行，但是发布了之后http://协议下是可以运行的.

JavaScript Iframe 自动适应

- - ITeye博客
场景：Iframe嵌入flash,希望flash能随着页面的resize而resize. 首先导入JQuery框架，并设置iframe的scrolling=“auto”,这样的话可以自动的出现滚动条. 然后添加window的resize事件.  这样的话，每次浏览器resize的话，都会对iframe重新设置height，从而得到iframe resize的效果.

iframe post提交数据

- - Web前端 - ITeye博客
对于iframe默认get提交 需要进行post数据的大量提交，给找到外国网站的简单例子如：
. 因为我项目用到的是 页面用的tab 样式（如何实现tab样式切换这里不做说明），嵌入的是三个页面iframe,需要在切换的时候更改target指定iframe名字，为了验证是否可行，只好试下，不然无别的办法.

div 添加滚动条

- - CSDN博客推荐文章
style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis" //让所有的table td都展开. overflow-y: hidden; overflow-x: scroll; width: 987px  //设置竖着没有滚动条，横着有滚动条 ，一定要设置宽度.