iframe 自適應高度

2021-04-13 07:30:58 字數 1698 閱讀 3214

由於html沒有includerequire,做網頁時我們會用iframe來達到包含頁面的目的。如果呼叫的iframe頁面高度會根據內容多少而發生變化,這時通常要保持iframe與內容頁面的高度,以避免出現iframe的滾動條。

先搜尋了一下,有不少好的例子,但總覺得說的還不夠明了。下面給出詳細例子:

1,建立頁面test.html。 頁面中含有乙個 iframe,name為ifrname,id為ifrid,src 為 iframe.html頁面。

2,建立iframe.html頁面,裡面含有一些內容。

這是iframe頁面,通過在父視窗頁面或子頁面新增js來自動更改寬高,以適應內容的多少。

要想使iframe自動適應寬和高,可以在 test.html 頁面iframe onload處增加一些js**。如:

this.height =  document.frames["ifrname"].document.body.scrollheight" id="ifrid"  scrolling="">

這樣iframe即可以自動適應高度了。如果不在onload處增加js,那也可以放到頁面上來呼叫。比如寫個函式。

這樣也可以達到自適應高寬的目的,在這裡要注意的是,iframeelement引數必須是 document.getelementbyid("iframeid"), iframewindow引數是 window.frames[0] 或document.frames["ifrname"]。 這是因為通過name得到的物件是視窗(window)物件,非視窗裡的iframe物件。同時document.getelementbyid("iframeid)不能像window物件可以得到window.document。

所以這裡最好給iframe分別加上name和id,id用來更改寬高樣式屬性,name用來執行window相關事件如location.href,document.write。bgcolor例外,元素物件和視窗物件都可以得到,這是因為他們都有這個屬性。

如果要隱藏iframe滾動條,可以設定iframewindow.scrolling = "no";但這不能相容多個瀏覽器,用iframeelement.document.body.style.overflow = "hidden";這種或直接在iframe處增加scrolling="no" html**就可以很好地相容了。

3,如果不能修改父頁面,而只能把**增加在iframe頁面裡呢?

可以寫個類似函式,放在iframe頁面裡:

yourcompany

.com 和b.

yourcompany

.com。

這時可以通過重新設定document.domain 來跨越2級網域名稱。

vardomain= "

yourcompany

.com";

try

} catch (ex)

如果網域名稱含有yourcompany.com,則改將document.domain改為yourcompany.com。

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

iframe高度自適應

iframe無邊框 jquery控制iframe自動高適應 var frame frmdialog frame.height frame.contents find body height 40 frame.load function jquery 關於contents的解釋 查詢匹配元素內部所有的...