JavaScriptの質問です。

Webページの横幅を自動的に取得したいです。
横幅というのはウインドウでもなくディスプレイでもなく、そのサイトが横幅何ピクセルで作っているか、ということです。
(もちろんリキッドレイアウトや全フラッシュの場合は取得できませんが。)

たとえば「XRAY」というサービス(http://westciv.com/xray/index.html)は、ブラウザで表示しているページの各HTML要素を細かく解析できますが、JavaScriptで動作しているようです。
こういった形でサイトの横幅だけが取得できればと思います。
JavaScriptだけでは難しい場合はPHPとの組み合わせでもいいので、どのように実現できるか教えていただければと思います。

回答の条件
  • 1人5回まで
  • 登録:2008/04/01 11:08:10
  • 終了:2008/04/08 11:10:02

回答(2件)

id:y-kawaz No.1

y-kawaz回答回数1420ベストアンサー獲得回数2252008/04/01 12:55:29

ポイント35pt

サンプルコードです。

<html>
<script type="text/javascript">
function showSize() {
    var body = document[document.compatMode=='CSS1Compat'?'documentElement':'body'];
    alert(
        "clientWH="+body.clientWidth+'x'+body.clientHeight+"\r\n"+
        "scrollWH="+(navigator.userAgent.match(/WebKit/)
            ? window.innerWidth+'x'+window.innerHeight
            : Math.max(body.scrollWidth,body.clientWidth)+'x'+Math.max(body.scrollHeight,body.clientHeight)
            )
    );
}
</script>
<style>
body {
    margin:0px;
    padding:0px;
}
</style>
<body>
<div style="width:500px;height:500px;background-color:pink;">
<input type="button" value="showSize" onclick="showSize()">
</div>
</body>
</html>

clientWHはブラウザ内のサイズで、scrollWHはスクロールバーが出て見えない部分も含むサイズです。

ブラウザのサイズを変えながら試すとそれぞれがどんな値か分かると思います。

bodyのmargin等を設定しているのは変な隙間を除く為です。試しにこのスタイルシートを外した時との値の違いを見ると効果が分かると思います。

scrollWHの取得は、ブラウザによって使えるプロパティがまちまちですが上記はそれを吸収できています。ちなみにWebKitはSafariやiPodTouchで使われているレンダリングエンジンです。

id:indiana

回答ありがとうございます。

質問が伝わりにくかったかもしれませんが、「ウインドウでもなくディスプレイでもなく」と書いたのは、

ウインドウ(ブラウザ)サイズではなく、そのサイト(ページ)のコンテンツの横幅が取得したいからです。

ご回答いただいたものはウインドウ(ブラウザ)サイズの取得ですよね?

2008/04/01 14:59:38
id:m_nagase No.2

nagase回答回数58ベストアンサー獲得回数82008/04/01 13:13:39

ポイント35pt

Mozilla Firefox というブラウザの拡張機能に Web Developer という物があります。

本家

http://chrispederick.com/work/web-developer/

日本語版

http://lab.tubonotubo.jp/tools/webdeveloper/index.html

その中に、[情報>ブロック要素のサイズを表示する] という機能があります。

それで一番外側のブロック要素のサイズを調べればよいかと思います。

ただしブロックの入れ子が複雑だと、サイズ表示が重なって見えないことも有ります。

そういう場合は、[CSS>スタイル情報を表示する] という機能を使って、

該当するブロック要素のスタイルシートを見ることができます。

id:indiana

回答ありがとうございます。

すみません。「JavaScriptの質問です」と質問させていただいたので、そういったツールの使用は考えていません。

質問に書くべきでしたね・・・。

2008/04/01 14:57:05
  • id:y-kawaz
    上の回答でscrollWHの値はスクロールで見えない部分を含めたサイズになるので、例えば上記コードをブックマークレット化しておき、横スクロールバーが出るまでウィンドウ幅を縮めてから実行すればそれがコンテンツの幅(?)になると思いますが駄目ですかね?この手順を例えばmixiで試すと950という値が取れました。
  • id:indiana
    なるほどそういう使い方だったのですね。失礼しました。
    しかし、できれば自動的に取得したいです。
    なにをしたいかというと、個人的なブックマークプログラム(PHP)で、そのサイトの横幅情報も自動的に含めたいのです。
    PHPでHTMLソースを取得してJavaScriptでパースして・・・と考えてはみたものの、やはり難しくて・・・。
    ブックマークレットであらかじめ取得してGETで渡す方向も考えてみます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません