時為什么需要使用iframe自適應(yīng)高度呢?其實(shí)就是為了美觀,要不然iframe和窗口長短大小不一,看起來總是不那么舒服,自適應(yīng)高度對于用戶體驗(yàn)度的提升尤為重要。網(wǎng)上關(guān)于iframe高度自適應(yīng)的代碼有很多,但比較雜亂,有一些過于復(fù)雜,有一些存在明顯錯誤。緣由心生給出了一段修改后的精簡版本,感覺不錯,并簡單修正了其中一處Opera下的錯誤。
iframe框架自適應(yīng)高度
首先設(shè)置樣式:body{margin:0; padding:0;}
如果不設(shè)置body的margin和padding為0的話,頁面上下左右會出現(xiàn)空白。
html代碼如下: <iframe src="https://www.371jianzhan.com" id="myiframe" scrolling="no" onload="changeMyFrameHeight()"></iframe> js代碼也得跟著改: function changeMyFrameHeight(){ var ifm= document.getElementById("iframepage"); ifm.height=document.documentElement.clientHeight; } window.onresize=function(){ changeMyFrameHeight(); }
window.onresize的作用就是當(dāng)窗口大小改變的時候會觸發(fā)這個事件。
所以,使用此方法可以完美的、真正的讓iframe自適應(yīng)高度了,試試看吧,并且兼容多種瀏覽器。
免費(fèi)咨詢:18838171308