2009年8月21日 星期五

讓iframe自動調整高度

找了好幾個方法,就以這個方法簡單又有效~~

首先,加入iframe的語法。
<iframe src="./source"(欲連結的網頁) name="mainframe" width="98%" 
marginwidth="0" marginheight="0" scrolling="No"
frameborder="0" id="mainframe" margin-left="20" ></iframe>

在到欲連結的網頁裡,在head下面加入以下程式碼。
<head>  
   <script>
      function resize(){
       parent.document.getElementById("mainframe").height=document.body.scrollHeight;    
     }
   </script>
</head>

並在body裡加入:
<body onload="resize();" > 

這樣就可以嚕~~

還有另一個方法也不錯。只要在同一個檔案內編寫就好。在有iframe的頁面的head之下加入以下程式碼。
<script type="text/javascript">
function SetCwinHeight(){
var iframeid=document.getElementById("iframeid"); //iframe id
if (document.getElementById){
if (iframeid && !window.opera){
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
iframeid.height = iframeid.contentDocument.body.offsetHeight;
}else if(iframeid.Document && iframeid.Document.body.scrollHeight){
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
</script>

iframe內加入onload="Javascript:SetCwinHeight()"
<iframe src="./NEWS" name="mainframe" width="98%" 
height="300" marginwidth="0" marginheight="0"
onload="Javascript:SetCwinHeight()"
 scrolling="No" frameborder="0"
id="mainframe" margin-left="20" ></iframe>

因為我的iframe是包在contentRight裏,若contentRight的高度設為自動,則contentRight一開始的高度會很小,所以將contentRight 設一個 min-height:700px 就可以嚕。

沒有留言:

張貼留言