关于iframe页面高度自适应的问题

iframe在实际开发中应该算是比较常见的，在一些情况下iframe的高度是不确定，甚至是时时变化的

一般这种情况会有下面几种情况：

1、父页面和iframe页面在同一个域下，这种情况最好解决。在iframe页面里通过window.parent即可定位到父页面的window对象，然后，通过定时器来检测iframe页面的高度变化，来设置父页面的相应容器的高度即可。

    实例代码：

    父页面：

 1 <!DOCTYPE HTML>
 2 <html lang="en-US">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title></title>
 6 </head>
 7 <body>
 8   <iframe src="iframe.html" id="if" frameborder="0"></iframe>
 9 </body>
10 </html>

子页面：

 1 <!DOCTYPE HTML>
 2 <html lang="en-US">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title></title>
 6 </head>
 7 <body style="background:red">
 8   <script type="text/javascript">
 9     (function(){
10       var doc = document,
11         //获取父页面的容器
12         par = window.parent.document.getElementById('if'),        
13         body = doc.body,
14         div,height;  
15       setTimeout(function (){
16         div = doc.createElement('br');
17         body.appendChild(div);
18         //当前页面的高度
19         height = body.offsetHeight;  
20         //设置容器高度      
21         par.style.height=height + 'px';
22         //定时来执行
23         setTimeout(arguments.callee,300);
24       },100);
25     })();
26   </script>
27 </body>
28 </html>

 

demo地址

 

2、父页面和子页面不在同一个域下。这种情况下，基于安全性的考虑，一些浏览器中通过window.parent就访问不到父页面的window对象，解决办法如下：

    ①在iframe里面B添加一个隐藏的iframe标签；

    ②iframe引用的文件C是和父页面在同一个域下面的；

    ③通过循环来检测B页面上中height的高度 ，并且设置给隐藏的iframe标签的地址中作为参数；

    ④在iframe页面c中也设置一个定时器来读取地址的值，可以获取b页面的高度；

    ⑤c页面可以通过window.parent访问到父页面的window对象，并设置相应容器的高度

实例代码：

父页面：

 1 <!DOCTYPE HTML>
 2 <html lang="en-US">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title></title>
 6 </head>
 7 <body>
 8   <div value="1">
 9     <iframe id="aaa"  src="http://edsn.sinaapp.com/demo/iframe/b.html" frameborder="2px"></iframe>
10   </div>  
11 </body>
12 </html>

b页面

 1 <!DOCTYPE HTML>
 2 <html lang="en-US">
 3   <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6   </head>
 7   <body style="background:red">
 8     <iframe id="p" src="http://sirzxj.sinaapp.com/iframe/2/c.html#" style="display:none" frameborder="2px"></iframe>
 9     <script type="text/javascript">
10       (function(){
11         var doc = document,
12           body = doc.body,   
13           g = doc.getElementById('p'),
14           src = g.src.split('#')[0] + '#',
15           br,height;
16         setTimeout(function(){
17           br = doc.createElement('br');
18           body.appendChild(br);
19           height = doc.body.offsetHeight;
20           g.src= src + height;
21           setTimeout(arguments.callee,500);
22         },500);
23         //alert()
24         g.src += 'abc';
25       })()
26     </script>
27   </body>
28 </html>

c页面：

 1 <!DOCTYPE HTML>
 2 <html lang="en-US">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title></title>
 6 </head>
 7 <body>
 8   <script type="text/javascript">
 9     (function(){
10       var tops = window.top.document.getElementById('aaa');    
11         setTimeout(function(){
12         var loc = window.location.href.split('#')[1];
13         tops.style.height = loc +'px';
14         setTimeout(arguments.callee,500);
15       },500);
16     })()
17   </script>
18 </body>
19 </html>

 

demo地址 

 

3，当子页面的iframe不同域，且无法操控时，即不能够在里面添加代码时候，是没有办法实现高度自适应的

posted @ 2012-04-28 15:38  sirzxj  阅读(9020)  评论(3)  编辑  收藏  举报