JavaScriptで、現在表示中ページの内容の幅を取得するには？

質問

JavaScriptで、現在表示中のページの内容の幅をピクセル単位で取得したいのですが、可能でしょうか？

ウインドウの幅ではなく、表示している内容の幅が欲しいのです。

document.body.clientWidth は、表示領域の幅のようでした。
document.body.scrollWidth も、表示領域の幅のようでした。
document.body.offsetWidth は、ウインドウの幅のようでした。

ブラウザのウインドウ幅に追従する「リキッド」なデザインの場合（教えて!gooもそうです）は、ブラウザのウインドウ幅に合わせて変化しますので、その幅が欲しいです。

Yahooのトップページはテーブルで幅を指定してあるようです。そのような場合はウインドウを最大化したりサイズを変えたりしても“内容”は変化しませんので、その幅を取得したいです。

どのようなプロパティにアクセスすれば良いでしょうか。

回答No.1

NTJ · ベストアンサー

教えて!gooの場合
<table cellspacing="0" cellpadding="0" width="100%" border="0">

Yahooのトップページの場合
<TABLE cellSpacing=0 cellPadding=2 width=710 bgColor=#eeeeee border=0>

です。

従って、
getElementsByTagName('table')[0].width
の内容を判断し、割合指定であれば
document.body.clientWidth
にその値を積算、定数指定であれば
そのまま値を採用すれば、一応の目的は果たせるかと思います。

ただし・・・
あくまでこの手法では「テーブルで画面整形をしている場合」に限られます。

ごく普通のテーブルで画面整形をしていないサイトであれば、その内部で使っているテーブルの幅が出てきてしましますし、使っていなければ、スクリプトエラーになってしまうでしょう。

さらには幅整形にdivエレメントを使っている場合には、別の手立てが必要になってきますし、
CSSでposition指定して特異な位置へフロートウインドウを表示していた場合には、もはやほとんどお手上げではないかと思います。

このあたり、全てに対処しようとするのなら、ほとんどHTML解析エキスパートシステムになってしまいます。

そもそも、他者の作成したサイトの「有効幅」を得ようという発想自体に問題があるように思われますが？