原文地址:https://www.cnblogs.com/rogge7/p/7762052.html

需求：實(shí)現(xiàn) iframe 的自適應(yīng)高度，能夠隨著頁面的長度自動(dòng)的適應(yīng)以免除頁面和 iframe 同時(shí)出現(xiàn)滾動(dòng)條的現(xiàn)象。?（需要只有iframe出現(xiàn)滾動(dòng)條）

本人一開始這么寫：會(huì)造成只有主頁面加載是設(shè)定一次。但是窗體變小或變大后不會(huì)觸發(fā)。

$(function setIframeHeight() {var iframe ;//高度初始化600，為了14寸筆記本iframe =document.getElementById('mainiframe');iframe.height=document.getElementById("sidebar").offsetHeight-56;// if (iframe) { // var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; // if (iframeWin.document.body) { // iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; // } // }})

轉(zhuǎn)：真正的讓iframe自適應(yīng)高度 兼容多種瀏覽器隨著窗口大小改變 - CSDN博客--摘錄在下方
http://blog.csdn.net/alex8046/article/details/51456131

今天有朋友問到我關(guān)于“iframe自適應(yīng)高度”的問題，原本以為是很簡單的問題，沒想到折騰了20分鐘才搞定。期間遇到幾個(gè)問題，要么是高度自適應(yīng)了，但是當(dāng)窗口改變時(shí)會(huì)出現(xiàn)滾動(dòng)條。也就是當(dāng)窗口放大時(shí)iframe沒有自動(dòng)跟隨變大顯得很小，或是當(dāng)窗口縮小時(shí)iframe還是之前那么大就出現(xiàn)了滾動(dòng)條。還有或是高度不準(zhǔn)確，那么就達(dá)不到想要的效果了。

為什么需要使用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.fulibac.com" 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" ο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的作用就是當(dāng)窗口大小改變的時(shí)候會(huì)觸發(fā)這個(gè)事件。

所以，使用方法二就可以完美的、真正的讓iframe自適應(yīng)高度了，試試看吧，并且兼容多種瀏覽器。

==上面摘錄結(jié)束

?

====本人修改為：（方法1）

<iframe id="mainiframe" width="100%" height="600" src="/dsdd/confirm/" οnlοad="changeFrameHeight()" frameborder="0" scrolling="auto"></iframe> function changeFrameHeight(){var ifm= document.getElementById("mainiframe");ifm.height=document.documentElement.clientHeight-56; //56是頭頂?shù)母叨?#xff0c;和網(wǎng)友估計(jì)不一樣。}$(function(){ window.οnresize=function(){changeFrameHeight(); }}); //這里不知道是否還要 $(function(){}) 這個(gè)閉包嗎？后證實(shí)不需要

?但要保留 ?window.οnresize=function(){ changeFrameHeight();}

==本人 方法2 ?html去掉每次iframe onload都觸發(fā)計(jì)算高度，更妙 ；推薦

<iframe id="mainiframe" width="100%" height="600" src="/dsdd/confirm/" frameborder="0" scrolling="auto"></iframe> function changeFrameHeight(){var ifm= document.getElementById("mainiframe");ifm.height=document.documentElement.clientHeight-56;}window.οnresize=function(){ changeFrameHeight();}$(function(){changeFrameHeight();});

特別聲明：?changeFrameHeight() 方法里面的計(jì)算高度要結(jié)合你的布局，并不是網(wǎng)上都合適你的。并且這個(gè)只有一個(gè)iframe

比如：下面的里面有很多方法，有點(diǎn)頭暈。^_^

關(guān)于iframe自適應(yīng)高度的方法總結(jié) - CSDN博客
http://blog.csdn.net/hj7jay/article/details/51675692

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/dirgo/p/10265251.html

總結(jié)

以上是生活随笔為你收集整理的[转]让iframe自适应高度-真正解决的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。