JavaScriptで現在表示中ページの内容の幅を取得する方法

前へ 次へ
このQ&Aのポイント
  • JavaScriptで現在表示中のページの内容の幅をピクセル単位で取得する方法について紹介します。
  • ウィンドウの幅ではなく、表示している内容の幅を取得する方法を説明します。
  • リキッドなデザインの場合でも、ブラウザのウィンドウ幅に合わせて変化する内容の幅を取得する方法を解説します。
回答を見る
  • ベストアンサー

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

JavaScriptで、現在表示中のページの内容の幅をピクセル単位で取得したいのですが、可能でしょうか？ ウインドウの幅ではなく、表示している内容の幅が欲しいのです。 document.body.clientWidth は、表示領域の幅のようでした。 document.body.scrollWidth も、表示領域の幅のようでした。 document.body.offsetWidth は、ウインドウの幅のようでした。 ブラウザのウインドウ幅に追従する「リキッド」なデザインの場合（教えて!gooもそうです）は、ブラウザのウインドウ幅に合わせて変化しますので、その幅が欲しいです。 Yahooのトップページはテーブルで幅を指定してあるようです。そのような場合はウインドウを最大化したりサイズを変えたりしても“内容”は変化しませんので、その幅を取得したいです。 どのようなプロパティにアクセスすれば良いでしょうか。

  • haru44
  • お礼率68% (153/223)

質問者が選んだベストアンサー

  • ベストアンサー
  • NTJ
  • ベストアンサー率44% (46/103)
回答No.1

教えて!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解析エキスパートシステムになってしまいます。 そもそも、他者の作成したサイトの「有効幅」を得ようという発想自体に問題があるように思われますが？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptでウィンドウやタグ要素の幅、高さを取得

    javascriptでウィンドウやタグ要素の幅、高さを取得したいのですが、 ブラウザによって使うプロパティが異なり、正直混乱してます。 なにかいいまとめのページとかありませんか？ （offsetWidth、clientWidth、scrollLeft、posLeft・・・orz..） それと、IE6とIE7ではそこらへんのプロパティは違う（IE7は標準になった？） とかありますか？ 教えてください！

  • Android端末実表示ピクセル数の取得方法

    Android端末の液晶解像度を取得しJavaScriptを使ったHTMLでの参照方法がわからないのでお教え願えないでしょうか Windows機でのブラウザ表示域をHTML内にJavaScriptを用いて取得するには以下の方法で可能になったのですが、 var wobj = new Object(); wobj.x = document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth; wobj.y = document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight; wobj.x = ブラウザの表示横ピクセル数 wobj.y = ブラウザの表示縦ピクセル数 上の関数を使ってAndroid端末から値を得るとViewportの値の１２８０、８００が帰ってきます。 Viewportの値ではなく液晶画面での表示域(ピクセル数)を取得したいのですが可能でしょうか 御存知の方、よろしくお願いします。

  • ウィンドウサイズの変更を滑らかに取得したい

    <html> <head> <script type="text/javascript"> function test(){ width = document.body.clientWidth; height = document.body.clientHeight; document.getElementById("haba").value=width; document.getElementById("takasa").value=height; } </script> </head> <body onload="window.setInterval('test()',1);"> 幅<input size="20" type="text" id="haba"/> 高さ<input size="20" type="text" id="takasa"/> </body> </html> -------------------------------------------------------------- 以上のような、ブラウザのウィンドウサイズを取得する コードを書いたのですが、滑らかに高さと幅が取得出来ずに困ってます。 イメージとしては、ウィンドウサイズをマウスで変更すると 高さと幅の数値がもっと滑らかに細かく変化するように したいのです。 どなたか回答お願いします。

  • ページの縦幅を取得する際の問題

    ページの縦幅は書き込まれる情報量によって動的に変わります。この縦幅を取得する良い方法がないか探していたところ、Lightboxの関数でまさしく探していたものがありました。 function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight) return arrayPageSize; } この関数を実行すると配列[0]に横幅、配列[1]に縦幅が返ってきます。しかしページ内にCSSでposition: absoluteで位置を指定したオブジェクトがあると、それを認識できないのか求める数値とは違う（小さい）ものが返ってきてしまいます。これはどのようにして対応すればよいのでしょうか？

  • Webページのテキスト文字を取得したいです。

    VB.NET、WinXP-SP2環境なのですが、 Webページのhtmlソースではなく、表示されている テキスト文字だけを取得したいです。 ＶＢでインターネットエクスプローラーを起動して、 Navigateでページを表示して、そこから IE.Document.body.outerText()などでやってもできると 思うのですが、出来ればＩＥなどのＷｅｂブラウザは使わないで WebClientのDownloadやOpenReadを使って取得した htmlソースから抜き取るような方法があればと思うのですが、 もしＩＥなどのＷｅｂブラウザを使わないで取得する方法があったら 教えてほしいです。 よろしくおねがいいたします。

  • IEでmax-width

    <html> <style> body { width:100%; margin:0; padding:0;} p { border:1px solid red; max-width:800px; width:expression(document.body.clientWidth > 800? "800px": "auto" ); } </style> <body> <p> ここに長文コピー＆ペーストしてください。 </p> </body> </html> このような物を見つけました。 この部分 document.body.clientWidth > をブラウザ幅からIDをつけた親要素の幅（IDはなくてもいい）に変えることはできないでしょうか。 minmax.jsはなしの方向でお願いします。

  • 【CSS javascript】ブラウザ依存 各ボックスwidthの合計値をoffsetWidthに収めたときの表示

    ボックス１、ボックス２、ボックス３と３つのボックスをfloat: left;で左から横に並べて、キッチリブラウザの幅に収めたいです。 ボックス１は、width: 20%;を指定。 ボックス２は、width: 5px;を指定。 ボックス３は、ブラウザ幅に３つが収まる値をjavascriptで計算して指定したいです。 そこで、各ボックスwidthの合計値をoffsetWidth以下なら、各ボックスは折り返さずに表示されると考え、以下htmlを作成しました。 ※行頭スペースは全角です。 <html> <head> <style type="text/css"> #b1 { 　background-color: ffffff; 　float: left; 　height: 100%; 　width: 20%; 　overflow: auto; } #b2 { 　background-color: 000000; 　float: left; 　height: 100%; 　width: 5px; } #b3 { 　background-color: ffffff; 　float: left; 　height: 100%; 　overflow: auto; } </style> <script> i = function(id){ return document.getElementById(id) }; function init(){ 　var W = document.body.offsetWidth || document.documentElement.offsetWidth; 　var b1 = i('b1').offsetWidth; 　var b2 = i('b2').offsetWidth; 　var b3= W - b1 - b2; 　alert(W +' = ' + b1 + ' + ' + b2 + ' + ' + b3); 　i('b3').style.width = b3 + 'px'; }; </script> </head> <body onLoad = "init();" > <div id="b1">f1</div> <div id="b2" >&nbsp;</div> <div id="b3">f2</div> </body> </html> 上記を実行した結果、IE,Operaは折り返してしまい、FirFox,Google Chromeは折り返さずに表示できました。 IE,Operaは、なぜ折り返してしまうのでしょうか？

  • フレームでのcols設定について

    フレームを使用してホームページを作っている者です。 framesetのcolsの設定にて ブラウザの中心から左へ329ピクセル左をフレームの境目に設定したいのですが、 可能でしょうか？ 気持ちとしては <frameset cols="50%-329,*"BORDER="0"> と設定したい感じです。 JavaScriptを使用して ブラウザの幅を取得して半分にして329ピクセル加算する方法で実現しようと考え ------------------------------------------------------------------------------ <html lang="ja"> <HEAD> <title>フレーム設定</title> </HEAD> <script language="javascript" type="text/javascript"> //ブラウザ幅を求めるgetBrowserWidth() //my-notebook（http://osima.jp/blog/js-getBrowserWidth/index.html）さんから拝借 function getBrowserWidth() { if ( window.innerWidth ) { return window.innerWidth; } else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; } else if ( document.body ) { return document.body.clientWidth; } return 0; } </script> <script language="javascript" type="text/javascript"> //フレームの左側の幅を求めるLeftWide() function LeftWide() { var leftwide = (getBrowserWidth())/2-329; return leftwide; } //framesetを出力するFrameSet() function FrameSet() { var output = '<frameset cols="' + LeftWide() + ',*"BORDER="0">'; document.write(output); } </script> <script language="javascript" type="text/javascript"><!-- //FrameSet()の呼び出し FrameSet(); // --></script> <frame src="./左のページ.html" name="left" marginwidth="0"> <frame src="./右のページ.html" name="right"> </frameset> </html> ------------------------------------------------------------------------------ と書いたのですが、 getBrowserWidth() を<BODY>～</BODY>内に書かないとブラウザ幅を取得してくれないらしく、 return 0;が帰ってきてしまい、左のページだけ表示され期待した結果が得られませんでした。 framesetの有るHTMLには<BODY>～</BODY>は定義できないのでここで詰んでしまいました。 ブラウザの中心から左へ329ピクセル左をフレームの境目に設定出来るのであれば どんな方法でも構いません。 お知恵を拝借させてください。よろしくお願いします。 追記 当方ブラウザはIE9を使用しております。 HTML、JavaScript共に初心者ではありませんが、 趣味程度の浅い知識しか御座いません。

    • ベストアンサー
    • HTML
  • ページのサイズを取得

    ページのサイズを取得することは出来ないのでしょうか？ http://www9.plala.or.jp/oyoyon/html/script/filesize.html を参考に 自信のページのサイズを取得しようと <html> <head> <title>test</title> <script type="text/javascript"> <!-- document.write("このページは " + document.fileSize + " バイトです。"); // --> </script> </head> <body> </body> </html> としてみたのですが、 「このページは undefined バイトです。」 が返りました。 IEで試しました。 undefinedの意味を調べてみたら 「定義されていない；漠然とした」と言う意味でした。 ページ内に画像はないのですが、 ページのサイズを取得することは出来ないのでしょうか？

    • ベストアンサー
    • HTML
  • javascriptを起動した後のウェブページを取得するには

    こんにちは。よろしくお願いいたします。 以下のようなHTMLソースをブラウザで読み込むとhogeと 表示されますが、PHPのfile_get_contentsやPerlのLWPなどを使って ページを取得するとソースそのものが取得されます。PHPやPerlを使って ブラウザから見たソース(以下の例ではhoge)を取得するには どのようにしたらよいのでしょうか？ <script type="text/javascript"> window.onload=function (){ document.getElementById("a").innerHTML="hoge"; } </script> <div id="a"></div>

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する