Apr 17

html中iframe自适应外部容器高度的解决方法 不指定

ljh , 18:11 , 利剑之辉的快乐生活 , 评论(0) , 引用(0) , 阅读(1152) , Via 本站原创 | |
    今天在工作中因为iframe的内容不固定,有时高有时低,需要让iframe自适应高度,于是在网上找到了如下解决方法,可以选择使用:

1.在包含Iframe的页面:

      <iframe name="iframe1" src="main.jsp" width="557px" height="100%" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" onload="this.height=iframe1.contentWindow.document.body.scrollHeight"></iframe>


    关键语句在于onload="this.height=this.document.body.scrollHeight"。

2.在包含Iframe的页面:
      
<iframe name="iframe1" src="main.asp" width="557px" height="100%" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" onload="getHeight()"></iframe>

    然后在每个要在Iframe中显示的页面底部加入

<div id="End"></div>
<script language="JavaScript">
function getHeight(){
     iframe1.height=document.getElementById("End").offsetTop+10;
}
</script>
Tags: ,
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]