Google Chromeで実際のウェブページサイズを検出する

Google Chromeで実際のページサイズを取得する方法を見つける必要があります。他のブラウザでは、これはwindow.scrollMaxYを使って簡単に行うことができます。 Chromeはこのプロパティをサポートしていません。これまでに見つかったすべての提案されたワークアラウンドは、期待どおりに動作しません。単純なテストページを次に示します(これを空のhtml/body要素に挿入します)。

<input type="button" name="size" value="size" onclick="alert(window.scrollMaxY)">
<div id="content" style="width:300px;height:500px;background-color:green"></div>

FireFoxでは、ブラウザウィンドウのサイズが何であっても、ページの実際の高さ、つまり余白とボタンの値が500 +の値を返すようになっています。 Chromeでは window.scrollMaxY を何かに置き換える必要があります。私はネットのプロパティ(document.body、document.documentElement、window.getComputedStyleなど)について言及しようとしましたが、ドキュメントの実際の高さは返されません。 Chromeウィンドウがドキュメント< strong>:この場合、Chromeが提供するすべてのプロパティは、ページの高さではなく、ウィンドウの高さを返します。たとえば、高さ768ピクセル、Chromeウィンドウが最大化された画面がある場合、Chromeではページの高さが500ではなく約700であるとレポートされます。 したがって、問題は、Chromeで実際のページサイズを取得する方法です。指定されたテストページであなたの提案をテストし、アラートのパラメータを必要なものに置き換えてください。

自己回答:

深い調査の結果、問題の原因はWebページそのもの、具体的にはページの先頭にあるDOCTYPEタグが見つからないことがわかりました。 DOCTYPEクロムを使わないと、Chromeは別のモードで動作し、本体をウィンドウ全体に広げます(zapthedingbatが回答に書いたように)。したがって、適切なWebページのマークアップは問題を解決するかもしれませんが、ページが私たち自身のページである場合にのみ可能です。 DOCTYPEを持たないインターネットの他の人々のウェブページについては、問題は持続するでしょう。私は外部のWebページで訴える必要があるので、何とかこれを解決する必要がありますが、これは別の質問です。

私はこの情報が、同じ問題でつまずく理由を理解できない他の人に役立つことを願っています。

2
最終的な解決策はここにあります - techblog.willshouse.com/2012/ 01/30/jquery-change-doctype を使用してください。 BackCompatモードのドキュメントの場合、DOCTYPEは動的に追加され、この document.documentElement.scrollHeight がChromeで正常に動作した後にのみ追加されます。
追加された 著者 Stan,

4 答え

$(window).load()ではなく、 $(document).ready()を使用していると思いますか?

DOMだけでなく すべて の読み込みが完了したら $(window).load()

Chromeでこれをテストしました:

$(window).load(function(){
    console.log($('body').height());
});

それは500を返しました。

2
追加された
コードは最初の投稿に挿入されます。ボタンを押す前にChromeのウィンドウを最大化しましたか?あなたはどんな価値を得ていますか?
追加された 著者 Stan,
カイル、詳細を記述してテストケースを記述してもらえますか?最新のjqueryへの参照を追加し、ヘッダーのスクリプトタグにコードスニペットを挿入しました。私は別のPCでこのテストを試みましたが、それはページの代わりにウィンドウサイズを与えています。また、下のzapthedingbatの答えを説明していただけますか?彼が正しいなら、テストはうまくいかない。
追加された 著者 Stan,
奇妙な。私はまた、WindowsでChrome 16を使用し、689を取得します。
追加された 著者 Stan,
さて、私はこれを説明する方法を知らない...ここでそれは異なって動作します。どのようなオペレーションシステム(Windows/Linux)とChromeのバージョンを使用していますか?
追加された 著者 Stan,
この前にブラウザウィンドウを最大化しましたか?
追加された 著者 Stan,
あなたの例の中の "content"要素は何ですか?私は、ページサイズ全体が必要なので、身体に対して試みました。
追加された 著者 Stan,
この簡単なテストでは、ボタンが付いたページを提供しました。そのため、ページが完全にロードされた後で確実に検査を実行できます。上記のイベントのいずれかにバインドしても結果は変わりません。プロトタイプのgetHeight()も機能しません。
追加された 著者 Stan,
この簡単なテストでは、正解を返します。 でないものについてもっと詳しく情報を提供できますか?おそらく私たちにいくつかのコードを見せてくれる?
追加された 著者 Kyle R,
console.log($( 'body')。height()); 522 - まだ正しいサイズを返します。
追加された 著者 Kyle R,
はい、私の窓は最大化されています。
追加された 著者 Kyle R,
私は現時点でOSXを使用していますが、Chromeバージョン16.0.912.77です。私もこれをWindowsシステムでテストしました。同じChromeバージョン。 Windowsシステムは、高さとして526を返します。
追加された 著者 Kyle R,

質問は単純ですが、すべての標準的な方法が期待どおりに機能しない場合があります。この問題の原因は、最初にDOCTYPEタグがないWebページです。 DOCTYPEがなければ、最新のブラウザーは特別な(奇妙な)モードで動作し、本文をウィンドウ全体に展開します。したがって、適切なWebページのマークアップが問題を解決する可能性がありますが、インターネットから来た他の人のページ(ブラウザ拡張などで処理されたもの)は保証されません。解決策は、ここで提案されているように、オンザフライでDOCTYPEを追加することです - jQuery -change-doctype 。 BackCompatモードのドキュメントの場合、DOCTYPEは動的に追加され、この document.documentElement.scrollHeight がChromeで正常に動作した後にのみ追加されます。

0
追加された

document.height will give you the height of the document in chrome. Is that what you're looking for?


編集

クロムでは、ボディが拡大されてビューポートを埋める。内容の高さを取得する場合は、本文の内容を1つの要素にラップし、このラッピング要素のoffsetHeightプロパティを読み取るか、本文の各childNodeを反復処理して最大offsetHeight + offsetTopプロパティを返します。

0
追加された
いいえ、そうではありません。ウィンドウがページより大きい場合、ウィンドウサイズを返します。
追加された 著者 Stan,

次のコードを使用してみてください。

alert(document.body.offsetHeight);

これは非常にクロスブラウザで、コンテンツの実際の高さを表示します(ビューポートではありません)。

まれに、体内の「位置:絶対」要素しかない場合、これは「失敗」する可能性があります。しかし、「ポジション:アブソリュート」要素は通常のレイアウトの範囲外であるため、これは予想される状況です。

0
追加された
私の最初の投稿には2行のhtmlコードがあります。これは私がウェブページに持っているすべてのものです。どういうわけか、htmlファイルを添付する必要がありますか?この後、Kyleの示唆によれば、 $(window).load code.jquery.com/jquery-latest.js )。しかし、どちらの方法でも、テスト用に異なるPCにウィンドウサイズ(700+)が返されます。この問題を解決するうえで役立つものが他に何かあるかどうかはわかりません(たとえば、テスト用のChromeインスタンスに拡張機能やプラグインがなくても何とか干渉する可能性があります)。
追加された 著者 Stan,
ポジションはありません。スタイルは絶対的です。簡潔にするために、私は非常に最小のテストページを提供しました。自分で確認することができます。私はあなたがページの内容よりも大きいはずのブラウザウィンドウについて私の発言に気付かなかったと思います。そうでなければ、あなたは正しいですが、与えられた条件ではありません。
追加された 著者 Stan,
これは機能しません(ページサイズではなくウィンドウサイズを返します)。どうやらあなたはそれを自分で試していませんでした。
追加された 著者 Stan,
私はテストページを見ない
追加された 著者 japrescott,
え?私の答え(と他の人たち)へのより多くの感謝は、多くを求めていないだろう!はい、私は実際にそれをテストし、はい、それは実際にクロムで動作します。そして、はい、私は1日に30mioの印象を持つウェブサイトでそのコードを使用し、それを信じるかどうか、それは実際に動作します。 document.documentElement.innerHeightでウィンドウサイズ(ViewPortサイズ)が検出されます。ページサイズはdocument.body.offsetHeightで検出されます。そしてまた;あなたの位置:絶対的な要素があなたのページにあれば、これは失敗するはずです!
追加された 著者 japrescott,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript