iframe自適應高度的多種方法方法小結發布者：本站     時間：2020-05-21 20:05:02

不帶邊框的iframe因為能和網頁無縫的結合從而不刷新頁面的情況下更新頁面的部分數據成為可能，可是 iframe的大小卻不像層那樣可以“伸縮自如”，所以帶來了使用上的麻煩，給iframe設置高度的時候多了也不好，少了更是不行，現在，讓我來告訴大 家一種iframe動態調整高度的方法，主要是以下JS函數：
第一種方法：代碼簡單，兼容性還可以，大家可以先測試下。
復制代碼 代碼如下:

function SetWinHeight(obj)
{
var win=obj;
if (document.getElementById)
{
if (win && !window.opera)
{
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}

最后，加入iframe,不能丟掉onload屬性，當然了，id也必須也函數中的win匹配
復制代碼 代碼如下:

<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe>

這么的這種也是跟上面的解決方法類似的代碼
經典代碼 iFrame 自適應高度，在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通過測試。
HTML代碼：
復制代碼 代碼如下:

<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>Javascript代碼：
<script type="text/javascript" language="javascript">
function iFrameHeight() {
var ifm= document.getElementById("iframepage");
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
</script>