iframe 自适应内容高度

来源:互联网 发布:java语法 编辑:程序博客网 时间:2024/05/10 06:10

<iframe src="home.aspx" name="frmContent" id="frmContent" allowtransparency="true" 
frameborder="0" scrolling="no"   onload="setIFrameHeight();"
    style="display:block; clear:both; width:100%; height:100%;" ></iframe>



<script type="text/javascript">
$(document).ready(function(){
setIFrameHeight();
});

function setIFrameHeight(){

    $("#frmContent").load(function(){
 $(this).height(0); //用于每次刷新时控制IFRAME高度初始化
 var height = $(this).contents().height() + 10;
 $(this).height( height < 500 ? 500 : height );
    });

}
</script>



-------------------------------  
如果页面中有编辑器,并且设置了编辑器高度,那就要注意控件和编辑器高度要一致,否则iframe无法自适应高度。

<style  type="text/css">
       #detail { width: 80%;   height: 400px;  }
 </style>

<script   language="javascript"   type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "detail", 
theme : "advanced",
language : "zh",
width: 680, 
        height: 400,
         ......   
});
</script>

<textarea   id="detail"    runat="server"></textarea>



原创粉丝点击