jQuery js iframe 自適應高度

 

方法一、jQuery

  <script type="text/javascript">  <!--  $(function(){      $("#workArea").load(function(){               var height = $(this).contents().find("#box").height() + 40;  //這樣給以一個最小高度          $(this).height( height < 400 ? 400 : height );      });        });  -->  </script>  

 

方法二：js

 function dyniframesize(iframename) {  var pTar = null;  if (document.getElementById){    pTar = document.getElementById(iframename);  }  else{     eval('pTar = ' + iframename + ';');  }  if (pTar && !window.opera){    pTar.style.display="block";     if (pTar.Document  && pTar.Document.body.scrollHeight){        pTar.height = pTar.Document.body.scrollHeight;    }  }}//window.onload =dyniframesize("leftFrame");

 

另轉——————————————————————未驗證

發表於
2011 年 04 月 22 日 由
前端開發-武方博

在網上找了很多的iframe自適應高度
的指令碼，對瀏覽的的相容性都不好。所以就想利用jquery
強大的相容性，寫一個iframe自適應高度
的指令碼。 

jquery
很強大，代碼很簡單：

$("#iPersonalInfo").load(function() { 

$(this).height($(this).contents().height()); 

}) 

有一點需要注意的，我也在調試的時候才發現的，耽誤了不少時間。就是綁定事件必須在iframe
載入完畢之前綁定，否則不會執行。 
以下是jQuery,load事件的概述 
在每一個匹配元素的load事件中綁定一個處理函數。 
如果綁定給window對象，則會在所有內容載入後觸發，包括視窗，架構，對象和映像。如果綁定在元素上，則當元素的內容載入完畢後觸發。 
注意:只有當在這個元素完全載入完之前綁定load的處理函數,才會在他載入完後觸發。如果之後再綁定就永遠不會觸發了。所以不要在$(document).ready()裡綁定load事件，因為jQuery會在所有DOM載入完成後再綁定load事件。

 

另外一種方法實現自適應iframe高度
自適應

 function adjustIFramesHeightOnLoad(iframe
) {

var
iframe
Height = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);

 $(iframe).height(iframeHeight);
 }