iframe高度自適應方案總結

2021-10-25 07:24:46 字數 861 閱讀 3550

iframe能將乙個網頁嵌入到另乙個網頁中,有個缺陷是高度不能隨內容而撐開,需要手動設定。

如果內容高度是動態的,就會存在問題。

在網上查了不少方案都存在一些問題,總結了一下

整體而言思路是:通過scrollheight獲取iframe的滾動高度,動態將iframe.height設定為scrollheight即可

但是要考慮到兩個問題

如果內容是動態改變的,就不能僅僅在window.onload後做一次高度改變

要考慮撐開後又高度又縮小的情況

為了解決上述的兩個問題,採用了以下辦法(輪詢)

不在window.onload後改變高度,而是跑定時器輪詢,每隔一段時間執行。雖然有點笨笨的,但是目前我也沒想到更好的方案

改變iframe.height之前先設為0

const

resizeiframeheight

= iframeel =>

}const timerid =

setinterval((

)=>

,200

)

按上述**修改後會存在bug,由於height一下變為0,一下變為scrollheight,會導致滾動條無法向下滑動。

後來轉變了一下思路,不能通過scrollheight去設定高度,而是去獲取iframe裡面主容器的高度來設定

const

resizeiframeheight

= iframeel =>

}const timerid =

setinterval((

)=>

,200

)

iframe 自適應高度

由於html沒有include或require,做網頁時我們會用iframe來達到包含頁面的目的。如果呼叫的iframe頁面高度會根據內容多少而發生變化,這時通常要保持iframe與內容頁面的高度,以避免出現iframe的滾動條。先搜尋了一下,有不少好的例子,但總覺得說的還不夠明了。下面給出詳細例子...

iframe自適應高度

來自 http ued.koubei.com 2008 05 07 iframe auto fit height 這貼比較長,沒有耐性的朋友請直接拖到帖子末尾的 示例,或者直接去玩我提供的demo。demo頁面 主頁面 iframe a.html 被包含頁面 iframe b.htm 和 ifram...

iframe高度自適應

nl ad this.height document.frames src document.body.scrollheight 例子 1,建立頁面 test.html 頁面中含有乙個 iframe,name為 ifrname id為 ifrid,src 為 iframe.html頁面。2,建立 i...