iframe高度自适应

1 父页面设置脚本(脚本必须在下):

父页：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <script src="../js/jquery-1.10.2.js"></script>
 6     <title></title>
 7 </head>
 8 <body> 
 9         <iframe id="ifr" src="iframe.html" frameborder="0" width="100%"></iframe>
10         <script type="text/javascript">
11             // 计算页面的实际高度，iframe自适应会用到
12             function calcPageHeight(doc) {
13                 var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
14                 var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
15                 var height = Math.max(cHeight, sHeight)
16                 return height
17             }
18 
19             var ifr = document.getElementById('ifr')
20             ifr.onload = function () {
21                 var iDoc = ifr.contentDocument || ifr.document
22                 var height = calcPageHeight(iDoc)
23                 ifr.style.height = height + 'px'
24             }
25         </script>
26 </body>
27 </html>

子页：

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5   </head>
 6   <body>
 7      <p>这是一个ifrmae，嵌入在http://snandy.github.io/lib/iframe/1.html里 </p>
 8      <p>根据自身内容调整高度</p>
 9      <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
10   </body>
11 </html>

2 子页面设置脚本：
父页：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <script src="../js/jquery-1.10.2.js"></script>
 6     <title></title>
 7 </head>
 8 <body> 
 9         <iframe id="ifr" src="iframe.html" frameborder="0" width="100%"></iframe>
10 </body>
11 </html>

子页：

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>2.html</title>
 6 <script>
 7     // 计算页面的实际高度，iframe自适应会用到
 8     function calcPageHeight(doc) {
 9         var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight);
10         var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);
11         var height = Math.max(cHeight, sHeight);
12         return height;
13     }
14 
15     window.onload = function () {
16         var height = calcPageHeight(document);
17         parent.document.getElementById('ifr').style.height = height + 'px';
18     }
19 </script>
20   </head>
21   <body>
22      <p>这是一个ifrmae，嵌入在http://snandy.github.io/lib/iframe/1.html里 </p>
23      <p>根据自身内容调整高度</p>
24      <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
25   </body>
26 </html>

参考：http://www.cnblogs.com/snandy/p/3902337.html

posted @ 2015-02-06 15:44  Wangyk  阅读(151)  评论(0)  编辑  收藏  举报