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

 }