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");

 

 

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

 

JQuery IFrame框架高度自適應（支持嵌套–兼容IE,ff,safafi,chrome）

發表於 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);

 }