真正的讓iframe自適應高度 兼容多種瀏覽器隨着窗口大小改變

真正的讓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自適應高度了，試試看吧，而且兼容多種瀏覽器。