最近微構(gòu)網(wǎng)絡(luò)在為長沙某單位進(jìn)行網(wǎng)站開發(fā)的時(shí)候，用到了layui的layer組件，而且按照需求，項(xiàng)目不少位置需要使用iframe彈出。在layui框架的layer組件，是可以支持彈窗尺寸的自動(dòng)的，也就是寬度和高度都可以自動(dòng)。文檔中有這樣的介紹：

在默認(rèn)狀態(tài)下，layer是寬高都自適應(yīng)的，但當(dāng)你只想定義寬度時(shí)，你可以area: ’500px’，高度仍然是自適應(yīng)的。當(dāng)你寬高都要定義時(shí)，你可以area: ['500px', '300px']

但由于layui默認(rèn)使用的尺寸單位是px，如果僅僅是設(shè)置area的值為auto的話，實(shí)現(xiàn)的效果跟我們想得到的效果是有所偏差的?？梢钥吹絠frame的高度并不如我們所需要的“自適應(yīng)”，而是出現(xiàn)了滾動(dòng)條。如下圖：

由于這個(gè)彈窗內(nèi)容高度很低，可能屏幕的三分之一以內(nèi)，這個(gè)時(shí)候預(yù)期結(jié)果應(yīng)該是需要直接展示iframe框架內(nèi)的所有的內(nèi)容，并且是沒有滾動(dòng)條的。可以進(jìn)一步看到動(dòng)態(tài)加載后的html數(shù)據(jù)如下：

我們可以看到雖然layui-layer-iframe元素的尺寸根據(jù)我們之前設(shè)定的area值為auto，寬高都為auto。然而iframe的高卻是一個(gè)固定值，并不能根據(jù)內(nèi)容自適應(yīng)。如果把a(bǔ)rea設(shè)定為固定值，可以解決這個(gè)問題，然而會(huì)出現(xiàn)兩個(gè)問題，導(dǎo)致實(shí)現(xiàn)效果非常不優(yōu)雅。

1、一個(gè)項(xiàng)目中可能有許多地方需要用到iframe，而且每個(gè)彈出的iframe高度肯定是不一定一樣的，這樣得每次調(diào)用的時(shí)候都設(shè)置尺寸，這樣太麻煩了，維護(hù)起來也很麻煩。

2、即便只有項(xiàng)目只有一個(gè)iframe或者不怕麻煩，然而在移動(dòng)端我們用的元素尺寸是相對(duì)尺寸，不再是固定的px，而是根據(jù)設(shè)備屏幕大小自適應(yīng)的。

因此，如果能在調(diào)用layer的時(shí)候就可以自動(dòng)計(jì)算iframe的高度，然后把這個(gè)值代入area，或許就可以解決這個(gè)問題。首先我們要知道的我們的目標(biāo)是獲取area[height]的值，也就是iframe的高度值。基本邏輯則是：

area[height]=layer標(biāo)題高度+iframe高度+btn高度

而上面截圖的layer并沒有btn，因此基本邏輯則是：

area[height]=layer標(biāo)題高度+iframe高度

當(dāng)然如果有btn則根據(jù)下面解決方案進(jìn)行適當(dāng)微調(diào)即可，主要是思路。用到的突破點(diǎn)就是layer提供了彈出后的函數(shù)回調(diào)參數(shù)success，官方文檔描述如下：

因此我們就可以得到如下代碼：

success: function(res) {
   var iframe = $(res).find('iframe');
   var titleHeight=$(res).find('.layui-layer-title').height();//標(biāo)題高度
   var iframeHeight=iframe[0].contentDocument.body.scrollHeight;//iframe高度
   var height=iframeHeight+titleHeight;
   $(res).css('height', height);//重定義layer彈出高度
   iframe.css('height', iframeHeight);//重定義iframe高度
}

但這樣也會(huì)存在另外一個(gè)問題，就是如果iframe的高度很高，比如iframe里面是外聯(lián)了一篇文章內(nèi)容，很可能超過一屏，內(nèi)容甚至是數(shù)屏。這樣如果僅僅是上面的邏輯肯定會(huì)出問題的，也就是這個(gè)彈窗會(huì)被撐出去，這個(gè)時(shí)候就需要限制一個(gè)最大高度。假設(shè)，我們限制layer的最大高度是當(dāng)前窗口高度的85%，那么我們可以根據(jù)上面的height的值跟窗口高度值比較即可來做區(qū)分處理。如下所示：

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);
   }
}

也就是當(dāng)layer的高度（iframe高度+標(biāo)題高度）大于等于窗口高度的85%的時(shí)候，設(shè)定layer的高度是窗口的85%，iframe的高度則在此基礎(chǔ)上減去標(biāo)題區(qū)域的高度。最后實(shí)現(xiàn)的效果如下（無需每次調(diào)用layer時(shí)設(shè)置尺寸，尺寸自動(dòng)自適應(yīng)）：

高度很小的iframe彈窗

高度中等的iframe彈窗

高度超過窗口高度85%的iframe彈窗（出現(xiàn)內(nèi)部滾動(dòng)條）

本次分享到此結(jié)束，當(dāng)然實(shí)際運(yùn)用到項(xiàng)目中大家可能需要根據(jù)自己實(shí)際情況進(jìn)行調(diào)整優(yōu)化，當(dāng)然這個(gè)思路對(duì)于非layui，自行使用iframe也是適用的。