iframe自適應(yīng)高度的多種方法方法小結(jié)發(fā)布者：本站     時(shí)間：2020-05-21 20:05:02

不帶邊框的iframe因?yàn)槟芎途W(wǎng)頁(yè)無(wú)縫的結(jié)合從而不刷新頁(yè)面的情況下更新頁(yè)面的部分?jǐn)?shù)據(jù)成為可能，可是 iframe的大小卻不像層那樣可以“伸縮自如”，所以帶來(lái)了使用上的麻煩，給iframe設(shè)置高度的時(shí)候多了也不好，少了更是不行，現(xiàn)在，讓我來(lái)告訴大 家一種iframe動(dòng)態(tài)調(diào)整高度的方法，主要是以下JS函數(shù)：
第一種方法：代碼簡(jiǎn)單，兼容性還可以，大家可以先測(cè)試下。
復(fù)制代碼 代碼如下:

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屬性，當(dāng)然了，id也必須也函數(shù)中的win匹配
復(fù)制代碼 代碼如下:

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

這么的這種也是跟上面的解決方法類(lèi)似的代碼
經(jīng)典代碼 iFrame 自適應(yīng)高度，在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通過(guò)測(cè)試。
HTML代碼：
復(fù)制代碼 代碼如下:

<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>