JavaScript でさまざまなブラウザーにわたって Web ドキュメントの高さを確実に判断するにはどうすればよいですか?

JavaScript を使用したドキュメントの高さの決定: クロスブラウザーの課題を明らかにする

特定の Web ドキュメントでは、標準の方法を使用して高さを取得することが困難になります。この問題は、文書の下部をパディングすることの非効率性によってさらに悪化します。たとえば、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 は誤った値を返します。

ブラウザ間でのドキュメントの高さの計算は、互換性の悪夢です。すべてのブラウザは 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 中国語 Web サイトの他の関連記事を参照してください。