Window.innerHeight - Web API 接口参考 编辑

概述

浏览器窗口的视口(viewport)高度(以像素为单位);如果有水平滚动条,也包括滚动条高度。

Note: If you use nsIDOMWindowUtils.setCSSViewport() to set the virtual window size for page layout purposes, the value returned by this property corresponds to the viewport height set using that method.

语法

var intViewportHeight = window.innerHeight;

intViewportHeight 为浏览器窗口的视口的高度。

window.innerHeight 属性为只读,且没有默认值。

备注

任何窗口对象,如 window、frame、frameset 或 secondary window 都支持 innerHeight 属性。

有一个算法用来获取不包括水平滚动条的视口高度。

例子

假设有一个 frameset

var intFrameHeight = window.innerHeight; // or

var intFrameHeight = self.innerHeight;
// 返回frameset里面的frame视口的高度

var intFramesetHeight = parent.innerHeight;
// 返回上一级frameset的视口的高度

var intOuterFramesetHeight = top.innerHeight;
// 返回最外部frameset的视口的高度

FIXME: link to an interactive demo here

改变一个窗口的大小,可以查看 window.resizeBy()window.resizeTo()

想获取窗口的外层高度(outer height),即整个浏览器窗口的高度,请查看 window.outerHeight

图像示例

下面的示意图展示了 outerHeight 和 innerHeight 两者的区别。

innerHeight vs outerHeight illustration

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support11.0 (1.7 or earlier)993
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support11.0 (1.0)993

Gecko 备注

从 Firefox 4 到 Firefox 24,该属性有 bug,而且某种情况下,会在页面加载前给出一个错误的值,查看 bug 641188

标准相关信息

DOM Level 0。不属于任何 W3C 技术规范或推荐。

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:129 次

字数:5825

最后编辑:7年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文