解決iframe高度自適應問題

2021-10-01 17:43:54 字數 522 閱讀 2239

最近工作中使用了讓人頭疼的iframe,碰到的最大問題是沒有好的方法使其高度自適應。尤其在頁面進行ajax後,後來google一番之後,發現iframe-resizer能夠比較好的解決這個問題,而且還支援跨域訪問(使用postmessage)。

使用方法:在iframe resizer壓縮包的js資料夾中,有兩個檔案:

第乙個js是:iframeresizer.min.js。這個js是要放在需要嵌入iframe的頁面(parent)中。

第二個js是:iframeresizer.contentwindow.min.js,它需要放到你的iframe頁面(child)中去,注意只要引入,不需要**配置。

然後再parent頁面 配置如下:為了相容需要設定  width:100% scrolling:no  overflow:visible

然後再js中使用:

按照以上步驟設定,基本上就能夠解決iframe自適應問題,且iframe內容可跨域。

iframe高度自適應解決方式

帶邊框的iframe因為能和網頁無縫的結合從而不重新整理頁面的情況下更新頁面的部分資料成為可能,可是 iframe的大小卻不像層那樣可以 伸縮自如 所以帶來了使用上的麻煩,給iframe設定高度的時候多了也不好,少了更是不行,現在,讓我來告訴大 家幾種iframe動態調整高度的方法。1 2 在ie6...

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