真正的讓iframe自適應高度 相容多種瀏覽器隨著視窗大小改變

Hiseico發表於2018-12-03
瀏覽器

真正的讓iframe自適應高度 相容多種瀏覽器隨著視窗大小改變

今天有朋友問到我關於“iframe自適應高度”的問題，原本以為是很簡單的問題，沒想到折騰了20分鐘才搞定。期間遇到幾個問題，要麼是高度自適應了，但是當視窗改變時會出現滾動條。也就是當視窗放大時iframe沒有自動跟隨變大顯得很小，或是當視窗縮小時iframe還是之前那麼大就出現了滾動條。還有或是高度不準確，那麼就達不到想要的效果了。

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

首先設定樣式

body{margin:0; padding:0;}
複製程式碼

如果不設定body的margin和padding為0的話，頁面上下左右會出現空白。 html程式碼如下:

<iframe id=”myiframe” src=”http://blog.sitcat.cn” width=”300″ height=”150″ frameborder=”0″ scrolling=”no”></iframe>
複製程式碼

下面就是今天寫的時候遇到的問題，考慮到有些朋友可能沒怎麼用jquery就直接用js吧。

方法一：

var ifm= document.getElementById(“myiframe”);
ifm.height=document.documentElement.clientHeight;
複製程式碼

這個方法可以達到讓iframe自適應高度的效果，但是如果你將視窗放大或縮小效果就不出來了，也就是本文開頭講的。需要再次重新整理，那就不屬於自適應了。 那麼問題來了，需要解決當視窗改變大小的時候執行js事件，以讓iframe自適就高度。那麼就需要將相關的程式碼寫成函式，並且給iframe加上onLoad=”changeFrameHeight()”，也就是下面的方法二了。

方法二：

<iframe id=”myiframe” src=”http://blog.sitcat.cn” width=”300″ height=”150″ frameborder=”0″ scrolling=”no”></iframe>
複製程式碼

js程式碼也得跟著改

function changeFrameHeight(){
var ifm= document.getElementById(“iframepage”);
ifm.height=document.documentElement.clientHeight;
}
window.onresize=function(){
changeFrameHeight();
}
複製程式碼

window.onresize的作用就是當視窗大小改變的時候會觸發這個事件。 所以，使用方法二就可以完美的、真正的讓iframe自適應高度了，試試看吧，並且相容多種瀏覽器。

相關文章