先佔坑 後續補充別的 參見 https://juejin.cn/post/6977194597915033607

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

首先設定樣式

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

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

html程式碼如下

<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" frameborder="0"></iframe>
複製程式碼
 

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

方法一

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

ifm.height=document.documentElement.clientHeight;
複製程式碼

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

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

方法二

<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" οnlοad="changeFrameHeight()" frameborder="0"></iframe>
複製程式碼

js程式碼也得跟著改

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

}

window.οnresize=function(){  
     changeFrameHeight();  

} 
複製程式碼
 

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

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