201212261543自動調整iframe高度

方法一︰

先加入iframe的語法。(Ex︰A.html)
<iframe src="./source"(欲連結的網頁,Ex︰B.html) name="mainframe" width="100%" marginwidth="0" marginheight="0" scrolling="No" frameborder="0" id="mainframe" ></iframe>

在到欲連結的網頁(Ex︰B.html)裡,在head下面加入以下程式碼。
<head>    
<script>     
function resize()
{      
 parent.document.getElementById("mainframe").height=document.body.scrollHeight;  //將子頁面高度傳到父頁面框架     
  }  
</script>
</head>

並在body(Ex︰B.html)裡加入︰
<body onload="resize();" > 

=================================================================================
方法二︰(本人比較偏愛使用此方法,在同一個檔案內編寫就好。)

<script type="text/javascript">
function SetCwinHeight()
{
var iframeid=document.getElementById("mainframe"); //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 src="./NEWS" name="mainframe" width="100%" marginwidth="0" marginheight="0" onload="Javascript:SetCwinHeight()"  scrolling="No" frameborder="0" id="mainframe"  ></iframe>


參考資源︰
http://kris-14.blogspot.tw/2009/08/iframe.html
自動調整iframe高度

回應

用心記錄生命中的每一段回憶,

將是人生中最美好的享受!!

關鍵字
    沒有新回應!