如何在不同浏览器中可靠地确定 JavaScript 中 Web 文档的高度？

使用 JavaScript 确定文档高度：揭示跨浏览器挑战

在某些 Web 文档中，使用标准方法检索高度会带来挑战。填充文档底部的无效性进一步加剧了这个问题。以网站 fandango.com 和 paperbackswap.com 为例：

在 fandango.com 上：

• jQuery 的 $(document).height() 提供了正确的值。
• document.height 返回 0。
• document.body.scrollHeight 返回0.

在 paperbackswap.com 上：

• jQuery 的 $(document).height() 抛出 TypeError: $(document) 为 null。
• document.height 返回错误值。
• document.body.scrollHeight 返回错误值value。

跨浏览器的文档高度计算是一个兼容性噩梦。虽然所有浏览器都提供 clientHeight 和scrollHeight 属性，但它们的计算方法有所不同。

准确高度检索的最佳实践
获取正确文档高度的最可靠方法是收集document 或 documentElement 中的所有高度值并使用最高的高度值。这种方法基本上由 jQuery 使用：

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

此方法为 fandango.com 和 paperbackswap.com 生成正确的高度。

注意事项
尝试在文档完全加载之前检索文档高度将始终导致 0。此外，动态内容加载或窗口大小调整可能需要重新测试。监视这些事件并进行相应的测试。

以上是如何在不同浏览器中可靠地确定 JavaScript 中 Web 文档的高度？的详细内容。更多信息请关注PHP中文网其他相关文章！