Iframe框架自动调节高度

做网站的时候，总会用到框架，frame或者iframe，当我们在某个iframe中加载网页时，经常遇到网页高度动态变化的问题，如果不调整iframe的高度，框架就会出现滚动条或是内容显示不完整，让人很不爽。在网上找了一下资料，最后通过javascript实现了iframe高度的动态调整。下面是本例iframe的框架结构：分成top、middle和foot三部分。

下面是ASP.NET页面中的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageFrame.aspx.cs" Inherits="NewLongMenHeSystem.PageFrame" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<iframe id="head" name="head" src="Head.aspx" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="100%"></iframe>
<iframe id="middle" name="middle" src="Jianjie.aspx" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="100%"></iframe>
<iframe id="foot" name="foot" src="Foot.aspx" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="100%"></iframe>
</body>
<script type="text/javascript">

    //这是动态调整框架高度的代码
    function resizeIframe()
    {
        //获取对象
        var head = document.getElementById("head");
        var middle = document.getElementById("middle");
        var foot = document.getElementById("foot");

       //中间页面中id为mian的DIV
        var middleMainDiv = middle.contentWindow.document.getElementById("main");
        try
        {
            //根据实际页面大小调整高度
            head.height = head.contentWindow.document.body.scrollHeight;
            foot.height = foot.contentWindow.document.body.scrollHeight;
            middle.height = middle.contentWindow.document.body.scrollHeight;

            //alert(middle.contentWindow.document.body.scrollHeight);

           if(middle.contentWindow.document.body.scrollHeight < 720) //准确值为713
            {
                //调整DIV的高度
                if(middleMainDiv.style.height < 580)
                {
                    middleMainDiv.style.height = 580;
                }
            }
        }
        catch (ex){}
    }
    //定时执函数（经过测试，这样做对CPU利用率的影响几乎为零）
    window.setInterval("resizeIframe()", 200);
   </script>
</html>

其中iframe中同时使用了id和name，这是为了兼容不同或者新旧浏览器，具体可以自己研究。

秒客网

Iframe框架自动调节高度

相关文章