萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 腳本Html教程 >> iframe 自適應高度方法

iframe 自適應高度方法

不帶邊框的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> 



下面這個兼容性更好一些

復制代碼代碼如下:
<script language="javascript
copyright © 萬盛學電腦網 all rights reserved