最近微构网络在为长沙某单位进行网站开发的时候，用到了layui的layer组件，而且按照需求，项目不少位置需要使用iframe弹出。在layui框架的layer组件，是可以支持弹窗尺寸的自动的，也就是宽度和高度都可以自动。文档中有这样的介绍：

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ’500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']

但由于layui默认使用的尺寸单位是px，如果仅仅是设置area的值为auto的话，实现的效果跟我们想得到的效果是有所偏差的。可以看到iframe的高度并不如我们所需要的“自适应”，而是出现了滚动条。如下图：

由于这个弹窗内容高度很低，可能屏幕的三分之一以内，这个时候预期结果应该是需要直接展示iframe框架内的所有的内容，并且是没有滚动条的。可以进一步看到动态加载后的html数据如下：

我们可以看到虽然layui-layer-iframe元素的尺寸根据我们之前设定的area值为auto，宽高都为auto。然而iframe的高却是一个固定值，并不能根据内容自适应。如果把area设定为固定值，可以解决这个问题，然而会出现两个问题，导致实现效果非常不优雅。

1、一个项目中可能有许多地方需要用到iframe，而且每个弹出的iframe高度肯定是不一定一样的，这样得每次调用的时候都设置尺寸，这样太麻烦了，维护起来也很麻烦。

2、即便只有项目只有一个iframe或者不怕麻烦，然而在移动端我们用的元素尺寸是相对尺寸，不再是固定的px，而是根据设备屏幕大小自适应的。

因此，如果能在调用layer的时候就可以自动计算iframe的高度，然后把这个值代入area，或许就可以解决这个问题。首先我们要知道的我们的目标是获取area[height]的值，也就是iframe的高度值。基本逻辑则是：

area[height]=layer标题高度+iframe高度+btn高度

而上面截图的layer并没有btn，因此基本逻辑则是：

area[height]=layer标题高度+iframe高度

当然如果有btn则根据下面解决方案进行适当微调即可，主要是思路。用到的突破点就是layer提供了弹出后的函数回调参数success，官方文档描述如下：

因此我们就可以得到如下代码：

success: function(res) {
   var iframe = $(res).find('iframe');
   var titleHeight=$(res).find('.layui-layer-title').height();//标题高度
   var iframeHeight=iframe[0].contentDocument.body.scrollHeight;//iframe高度
   var height=iframeHeight+titleHeight;
   $(res).css('height', height);//重定义layer弹出高度
   iframe.css('height', iframeHeight);//重定义iframe高度
}

但这样也会存在另外一个问题，就是如果iframe的高度很高，比如iframe里面是外联了一篇文章内容，很可能超过一屏，内容甚至是数屏。这样如果仅仅是上面的逻辑肯定会出问题的，也就是这个弹窗会被撑出去，这个时候就需要限制一个最大高度。假设，我们限制layer的最大高度是当前窗口高度的85%，那么我们可以根据上面的height的值跟窗口高度值比较即可来做区分处理。如下所示：

success: function(res) {
   var iframe = $(res).find('iframe');
   var titleHeight=$(res).find('.layui-layer-title').height();
   var iframeHeight=iframe[0].contentDocument.body.scrollHeight;
   var height=iframeHeight+titleHeight;
   if(window.innerHeight*0.85>height) {
      $(res).css('height', height);
      iframe.css('height', iframeHeight);
   }else{
      $(res).css('height', '85%');
      iframeHeight=$(res).height()-titleHeight;
      iframe.css('height', iframeHeight);
   }
}

也就是当layer的高度（iframe高度+标题高度）大于等于窗口高度的85%的时候，设定layer的高度是窗口的85%，iframe的高度则在此基础上减去标题区域的高度。最后实现的效果如下（无需每次调用layer时设置尺寸，尺寸自动自适应）：

高度很小的iframe弹窗

高度中等的iframe弹窗

高度超过窗口高度85%的iframe弹窗（出现内部滚动条）

本次分享到此结束，当然实际运用到项目中大家可能需要根据自己实际情况进行调整优化，当然这个思路对于非layui，自行使用iframe也是适用的。