自动计算iframe的高度，避免滚动条

最新推荐文章于 2024-06-14 15:13:12 发布

梦__

最新推荐文章于 2024-06-14 15:13:12 发布

阅读量748

点赞数

文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/weixin_42117413/article/details/123174771

版权

本文探讨了在不同浏览器中获取网页可见区域尺寸的差异，主要涉及`document.body`和`document.documentElement`在IE、Firefox和Opera下的表现。在W3C标准定义下，各浏览器对`clientWidth`和`clientHeight`的解释不一致，影响了页面尺寸的正确获取。此外，还介绍了如何动态计算iframe高度以避免滚动条的出现。

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

1.于获取各种浏览器可见窗口大小的一点点研究

<script>
function getInfo(){
    var s = "";
    s = " 网页可见区域宽：" document.body.clientWidth;
    s = " 网页可见区域高：" document.body.clientHeight;
    s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)";
    s = " 网页可见区域高：" document.body.offsetHeight " (包括边线的宽)";
    s = " 网页正文全文宽：" document.body.scrollWidth;
    s = " 网页正文全文高：" document.body.scrollHeight;
    s = " 网页被卷去的高(ff)：" document.body.scrollTop;
    s = " 网页被卷去的高(ie)：" document.documentElement.scrollTop;
    s = " 网页被卷去的左：" document.body.scrollLeft;
    s = " 网页正文部分上：" window.screenTop;
    s = " 网页正文部分左：" window.screenLeft;
    s = " 屏幕分辨率的高：" window.screen.height;
    s = " 屏幕分辨率的宽：" window.screen.width;
    s = " 屏幕可用工作区高度：" window.screen.availHeight;
    s = " 屏幕可用工作区宽度：" window.screen.availWidth;

    s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色";
    s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸";
    //alert (s);
}
getInfo();
</script>

在我本地测试当中：
在IE、FireFox、Opera下都可以使用

document.body.clientWidth
document.body.clientHeight

即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用

document.body.clientWidth
document.body.clientHeight

可是IE和FireFox则使用

document.documentElement.clientWidth
document.documentElement.clientHeight

原来是W3C的标准在作怪：

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

如果在页面中添加这行标记的话在IE中：

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在FireFox中：

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在Opera中：

document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

而如果没有定义W3C的标准，则
IE为：

document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox为：

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

Opera为：

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

2.自动计算iframe的高度，避免滚动条

 $(function(){
        var hh = $(document).height()-100+"px";
        $('#tt').css('height',hh);
        $('#tt').css('overflow','auto');

        var height_scrollHeight = window.screen.availHeight;
            height_scrollHeight = height_scrollHeight-318;

        //alert(height_scrollHeight);
        document.getElementById("rzFrame").style.height=height_scrollHeight+"px";
    })


<td width="65%" valign="top" >
        <iframe   scrolling="auto" src="sbjhxq.jsp?ActionID=<%=ActionID%>" id="rzFrame"                name="rzFrame" width="100%"   frameborder="0" style="background-color=transparent;background-img:url(../images/grid_10.png)">
        </iframe>
</td>