javascript设置iframe的高度

最新推荐文章于 2021-06-20 22:56:05 发布

长江

最新推荐文章于 2021-06-20 22:56:05 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： C#WEB 文章标签： iframe javascript function 框架 null div

本文链接：https://blog.youkuaiyun.com/lonestar555/article/details/7053698

C#WEB 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现IFrame自适应高度的方法。利用SetWinHeight函数，可以根据父级元素的高度动态调整IFrame的高度，确保内容完整显示且不出现多余空白。此方法适用于需要嵌入动态内容的网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//包括设置父DIV的高度，至于第几层才是正确的，自己调试找正确的高度了

function SetWinHeight(obj)
        { 
          //debugger
        var win = obj; 
            if(document.getElementById)
            {
                if (win && !window.opera)
                {
                    if (win.parentNode && win.parentNode.parentNode && win.parentNode.parentNode.parentNode && win.parentNode.parentNode.parentNode.clientHeight)
                    {
                        win.height = win.parentNode.parentNode.parentNode.clientHeight;   
                        win.parentNode.style.height = win.height;                        
                        win.parentNode.parentNode.style.height = win.height; 
                    } 
                }
            } 
        }

<iframe  id="iframeRightMRS" onload="Javascript:SetWinHeight(this)" name="iframeRightMRS" width="230" height="100%" align="center" src="/Home/RightMRS"  frameborder="0" scrolling="no"></iframe>

//iframe子页面中：

// 取得iframe框架的高度，，这个高度已经在主页上自动设置了
            var panelheight = parent.document.all("iframeRightMRS").offsetHeight
            if (panelheight != null && panelheight != 0)
            { 
                panelheight = panelheight - 1;
            }