iframe在实际开发中应该算是比较常见的,在一些情况下iframe的高度是不确定,甚至是时时变化的
一般这种情况会有下面几种情况:
1、父页面和iframe页面在同一个域下,这种情况最好解决。在iframe页面里通过window.parent即可定位到父页面的window对象,然后,通过定时器来检测iframe页面的高度变化,来设置父页面的相应容器的高度即可。
实例代码:
父页面:
1 2 3 4 56 7 8 9 10
子页面:
1 2 3 4 56 7 8 27 28
2、父页面和子页面不在同一个域下。这种情况下,基于安全性的考虑,一些浏览器中通过window.parent就访问不到父页面的window对象,解决办法如下:
①在iframe里面B添加一个隐藏的iframe标签;
②iframe引用的文件C是和父页面在同一个域下面的;
③通过循环来检测B页面上中height的高度 ,并且设置给隐藏的iframe标签的地址中作为参数;
④在iframe页面c中也设置一个定时器来读取地址的值,可以获取b页面的高度;
⑤c页面可以通过window.parent访问到父页面的window对象,并设置相应容器的高度
实例代码:
父页面:
1 2 3 4 56 7 8 9 1011 12
b页面
1 2 3 4 56 7 8 9 27 28
c页面:
1 2 3 4 56 7 8 18 19
3,当子页面的iframe不同域,且无法操控时,即不能够在里面添加代码时候,是没有办法实现高度自适应的