最近在做项目时用到了框架页,可是在网页中嵌入框架页时,框架页往往会出现滚动条,这对用户操作很不方便。一般情况下,嵌入的框架页面会出现纵向滚动条,那么我们能不能想办法让框架页的高度自适应呢?即根据页面的高度自动调整框架页的高度,而不出现纵向滚动条。在网上找了一些方法,但都只适用于IE浏览器,后来终于找到一种可以兼容IE和Firefox浏览器的了,拿来分享。
其实用javascript代码就能实现,具体方法如下:
1、将如下javascript代码嵌入到网页中:
<script type="text/javascript"> function SetCwinHeight(){ var iframeid=document.getElementById("htmer_iframe"); //框架页id if (document.getElementById){ if (iframeid && !window.opera){ if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){ iframeid.height = iframeid.contentDocument.body.offsetHeight; }else if(iframeid.Document && iframeid.Document.body.scrollHeight){ iframeid.height = iframeid.Document.body.scrollHeight; } } } } </script>
2、在网页中调用iframe框架页代码:
<iframe width="100%" id="htmer_iframe" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="htmer.php"></iframe>