實現iframe高度自適應

2022-01-26 06:40:48 字數 922 閱讀 1559

iframe高度自適應使用場景是類似於微博,新聞等點選載入更多這種功能實現,要求iframe的高度能夠跟隨內容的變化而變化。

父html檔案,也就是引用ifram的檔案

src="blog/blog.display.html"  引用的檔案
id="blog-display" 全域性唯一id
scrolling="no" 去除滾動條
<

iframe

src="blog/blog.display.html"

id="blog-display"

scrolling

="no"

>

iframe>

被引用的html檔案

blog.display.html

<

html

>

<

body

>

<

div

id="content"

>

div>

<

body

id="more-btn"

>載入更多

body

>

body

>

html

>

blog.display.js  

注意這裡使用的id(blog-display)為父iframe 中的 id。

就是將body的scrollheight賦給父iframe 的高度height.

$("#more-btn").click(function

())function() iframeresize(),

showmore

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