如何使用 JavaScript 获取页面、窗口的高度

获取页面或窗口的高度在前端开发中是一个非常常见且重要的需求，尤其是在处理响应式布局、执行动画效果、计算元素定位等方面。使用 JavaScript 获取页面和窗口高度的主要方式包括使用 window.innerHeight 获取窗口可视区域高度、document.documentElement.scrollHeight 或 document.body.scrollHeight 获取完整页面高度、window.outerHeight 获取整个浏览器窗口的高度。其中，window.innerHeight 是最常用于获取窗口可视区域高度，它考虑了页面当前的缩放级别，并且能够提供准确的视口大小。

一、获取窗口的可视区域高度

window.innerHeight

window.innerHeight 属性提供了一个窗口的视口高度，包括水平滚动条（如果存在的话），但并不包括浏览器顶部的地址栏、书签栏等。这个属性是非常有用的，特别是在制作响应式布局和进行页面布局计算时。

另一个相关的属性 window.innerWidth 为我们提供了窗口的视口宽度。理解这两个属性如何工作，能够帮助前端开发者更好地控制元素在不同屏幕尺寸和分辨率下的布局行为。

使用示例

let windowHeight = window.innerHeight;

console.log("窗口的可视区域高度为:", windowHeight);

二、获取完整页面的高度

document.documentElement.scrollHeight

为了获取整个页面的高度，可使用 document.documentElement.scrollHeight。这个属性返回文档完整的高度，包括溢出视口部分的高度，这对于执行需要基于整个页面高度的操作特别有用。比如，当你需要判断页面是否滚动到底部时，这个属性是计算的关键。

使用示例

let pageHeight = document.documentElement.scrollHeight;

console.log("完整页面的高度为:", pageHeight);

三、获取整个浏览器窗口的高度

window.outerHeight

window.outerHeight 属性返回整个浏览器窗口的高度，包含了窗口本身的UI部分（如工具栏、滚动条）。这个度量可能对于某些特定的功能需求，如插件或者与窗口尺寸紧密相关的操作，非常有用。

使用示例

let browserWindowHeight = window.outerHeight;

console.log("浏览器窗口的整体高度为:", browserWindowHeight);

四、注意事项及兼容性处理

尽管获取页面或窗口尺寸的方法相对简单，但在不同浏览器或不同版本的浏览器中，它们的表现可能会有所不同。因此，在使用这些属性时，尤其需要注意兼容性问题。

兼容性考量

一些老旧的浏览器（如IE早期版本）可能不支持 window.innerHeight 和 window.outerHeight 属性。对于这样的情况，可以通过其他方式来兼容这些浏览器，例如使用 document.documentElement.clientHeight 或 document.body.clientHeight 作为 window.innerHeight 的备选方案。

示例代码

function getWindowHeight() {

    if (typeof window.innerHeight !== 'undefined') {
        return window.innerHeight;
    } else {
        return document.documentElement.clientHeight || document.body.clientHeight;
    }
}
console.log("窗口的可视区域高度为:", getWindowHeight());

通过这种方式，我们可以确保即使在老旧的浏览器中也能够比较准确地获取到窗口或页面的高度信息，保证前端页面的兼容性和用户体验。

五、结论

掌握如何使用 JavaScript 获取页面和窗口的高度对于前端开发是十分重要的，它不仅关系到页面布局的适应性和灵活性，还直接影响到用户的使用体验。通过上述方法，开发者可以灵活、准确地获取所需的尺寸信息，为用户提供更为丰富和流畅的Web体验。

相关问答FAQs：

如何使用 JavaScript获取页面的高度？

1. 使用document.documentElement.scrollHeight可以获取整个页面的高度。这个属性返回的是整个文档的高度，包括可见区域和滚动条不可见的部分。

2. 如果只想获取可见区域的高度，可以使用document.documentElement.clientHeight来实现。这个属性返回的是当前窗口视口的高度，不包括滚动条不可见的部分。

3. 如果页面中有滚动条，并且想要获取滚动内容区的高度，可以使用document.documentElement.scrollHeight - document.documentElement.clientHeight。

如何使用 JavaScript获取窗口的高度？

1. 使用window.innerHeight可以获取当前窗口的视口高度，不包括浏览器的工具栏和状态栏。

2. 如果希望获取包括浏览器工具栏和状态栏在内的窗口的总高度，可以使用window.outerHeight。

3. 如果页面中有滚动条，并且想要获取滚动内容区的高度，可以使用document.documentElement.scrollHeight - window.innerHeight。

如何使用 JavaScript获取页面内容的实际高度？

1. 如果想要获取页面实际内容的高度，可以使用Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)。这个方法会返回页面内容和滚动条不可见部分的总高度。

2. 如果只想获取当前窗口视口的实际高度，可以使用Math.max(document.documentElement.clientHeight, window.innerHeight)。这个方法会返回当前窗口视口的可见高度。

3. 如果页面中有滚动条，并且想要获取滚动内容区的实际高度，可以使用Math.max(document.documentElement.scrollHeight - document.documentElement.clientHeight, 0)。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。