如何在不同瀏覽器中可靠地確定 JavaScript 中 Web 文件的高度？

使用 JavaScript 確定文件高度：揭示跨瀏覽器挑戰

在某些 Web 文件中，使用標準方法檢索高度會帶來挑戰。填充文件底部的無效性進一步加劇了這個問題。以網站 fandango.com 和 paperbackswap.com 為例：

在 fandango.com 上：

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

在paperbackswap.com 上：

• jQuery 的$(document). 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中文網其他相關文章！