網(wǎng)頁.png

為什么需要使用iframe自適應(yīng)高度呢？其實(shí)就是為了美觀，要不然iframe和窗口長短大小不一，看起來總是不那么舒服，特別是對(duì)于我們這些編程的來說，如鯁在喉的感覺。
首先設(shè)置樣式

body{margin:0; padding:0;}

如果不設(shè)置body的margin和padding為0的話，頁面上下左右會(huì)出現(xiàn)空白。
html代碼如下

<iframe src="http://www.itdecent.cn/p/dc28e17e2d6f" id="myiframe" scrolling="no" frameborder="0"></iframe>

下面就是今天小編寫的時(shí)候遇到的問題，考慮到有些朋友可能沒怎么用jQuery就直接用js吧。

方法一

var ifm= document.getElementById("myiframe");
ifm.height=document.documentElement.clientHeight;

這個(gè)方法可以達(dá)到讓iframe自適應(yīng)高度的效果，但是如果你將窗口放大或縮小效果就不出來了，也就是本文開頭講的。需要再次刷新，那就不屬于自適應(yīng)了。
那么問題來了，需要解決當(dāng)窗口改變大小的時(shí)候執(zhí)行js事件，以讓iframe自適就高度。那么就需要將相關(guān)的代碼寫成函數(shù)，并且給iframe加上onLoad="changeFrameHeight()"，也就是下面的方法二了。

方法二

<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" onload="changeFrameHeight()" frameborder="0"></iframe>

js代碼也得跟著改

function changeFrameHeight(){    
    var ifm= document.getElementById("iframepage");     
    ifm.height=document.documentElement.clientHeight;
}
window.onresize=function() {       
    changeFrameHeight();  
} 

window.onresize的作用就是當(dāng)窗口大小改變的時(shí)候會(huì)觸發(fā)這個(gè)事件。
所以，使用方法二就可以完美的、真正的讓iframe自適應(yīng)高度了，試試看吧，并且兼容多種瀏覽器。