关于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>
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>
3，当子页面的iframe不同域，且无法操控时，即不能够在里面添加代码时候，是没有办法实现高度自适应的
版权声明：本文为sirzxj原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。