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

最新推荐文章于 2021-12-10 11:07:09 发布

summer85

最新推荐文章于 2021-12-10 11:07:09 发布

阅读量710

点赞数

分类专栏：前端文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/summer85/article/details/84742718

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何解决同域的1.html页面通过iframe嵌入2.html时，实现iframe高度自适应，避免滚动条出现的问题。提供两种方法：1. 父页面（1.html）通过JS监听iframe的load事件，获取并设置高度；2. 子页面（2.html）在window.onload后计算高度，通知父页面调整iframe高度。这两种方法都能确保iframe内容高度与实际内容匹配。

摘要由CSDN通过智能技术生成

引子
父页面里控制子页面
子页面里控制父页面

一、引子

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

1.html

 
         <!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元素将高度撑高一些

 
         <!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代码

 
         <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）底部加入如下代码

 
         <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>