iframe自適應高度

2021-08-17 21:35:10 字數 852 閱讀 2360

為什麼需要使用iframe自適應高度呢?其實就是為了美觀,要不然iframe和視窗長短大小不一,看起來總是不那麼舒服,特別是對於我們這些程式設計的來說,如鯁在喉的感覺。

首先設定樣式

body

如果不設定body的margin和padding為0的話,頁面上下左右會出現空白。

html**如下

var ifm= document.getelementbyid("myiframe");

ifm.height=document.documentelement.clientheight;

這個方法可以達到讓iframe自適應高度的效果,但是如果你將視窗放大或縮小效果就不出來了,也就是本文開頭講的。需要再次重新整理,那就不屬於自適應了。

那麼問題來了,需要解決當視窗改變大小的時候執行js事件,以讓iframe自適就高度。那麼就需要將相關的**寫成函式,並且給iframe加上onload="changeframeheight()",也就是下面的方法二了。

js**也得跟著改

function changeframeheight()

window.οnresize=function() 

window.onresize的作用就是當視窗大小改變的時候會觸發這個事件。

所以,使用方法二就可以完美的、真正的讓iframe自適應高度了,並且相容多種瀏覽器。

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