ブラウザのサイズ取得がXHTMLにするとうまくいか

2023/08/15 14:43

このQ&Aのポイント

ブラウザのサイズ取得がXHTMLにするとうまくいかない問題について解説します。
IE8での高さの取得に関する問題と、正しい値が出力される理由について説明します。
スクロール分の要素を追加することで大きすぎる値が出力される問題について解決策を提案します。

ベストアンサー

ブラウザのサイズ取得がXHTMLにするとうまくいか

2011/07/03 15:32

http://www.tagindex.com/javascript/user/area.html にブラウザのサイズ取得のサンプルが載ってます。 <html> <head> <title>TAG index Webサイト</title> </head> <body> <script type="text/javascript">  </script> </body> </html> です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> にすると、IE8で高さが小さな値しかでません。しかし、紹介したページはただの<html>でないのに、正しい値が出力されています。何が足りないのでしょうか。 <p>・・・</p> を２スクロール分入れたら、今度が大きすぎる値が出力されてしまいました。困っております。どうか助けてください。お願いします。

yamato-g
お礼率72% (16/22)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

kuzumiHK
ベストアンサー率72% (132/183)

2011/07/03 19:15 回答No.1

こちらのサイトを参考にすればうまくいきますよ。 http://www.marguerite.jp/Nihongo/WWW/DHTML/WindowSize.html DOCTYPE宣言を追加すると標準準拠モードになるため、その影響で正しく効いていないようです。 <script type="text/javascript">  </script>

関連するQ&A

document.body.scrollTop の数値が正常に取得できない
とあるJavascriptを組んでいるのですが、document.body.scrollTopの値が取得できず困っています。検証の結果、下記のプログラムだと数値が取得できず、１行目の<!DOC...>を削除すると正常に取得することができます。スタイルシートを多用している関係で、１行目を削除してしまうと他のレイアウトが崩れてしまうため、これ以外で正常に動かす方法はないでしょうか？検証ブラウザ：IE6.0.2900、Firefox 1.52 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>TEST</title> </head> <body> <p> </p> <p> </p> 【中略】 <p> </p> <p><a href="javascript:alert(document.body.scrollTop);">document.body.scrollTopの数値を表示</a></p> </body> </html>
- 締切済み
- JavaScript
ｊｓ　array -1
javascriptのソースコードの引用なのですが <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script src="fastclick.js"></script> <script> function print(str){ document.write(str + "<br />"); } document.write("<p>"); var ary = new Array("東京", "大阪", "名古屋"); for (var i = 0 ; i < ary.length ; i++){ print("array[" + i + "] = " + ary[i]); } document.write("</p>"); document.write("<p>"); try{ var ary2 = new Array(-1); }catch(e){ print(e); } document.write("</p>");</script> </body> </html> ３０行目ｔｒｙ文の中の「 var ary2 = new Array(-1); 」なのですがnewで初期化をしているという事は何となく理解できるのですが引数で-1を指定しているのですが-1を指定する意味は何かあるのでしょうか？
- ベストアンサー
- JavaScript
JavascriptでObjectからJSON形式変換するにはどうすればいいでしょうか？
toSourceだと少し違うし、どうすればいいのでしょうか。簡単に変換できる関数でもあればいいのですが、わかりませんでした。どなたかご教授お願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>objctからJSONに変換</title> <script type="text/javascript"> obj = new Object(); obj.test = "txt"; str = obj.toSource(); document.write(str); //--> </script> </head> <body> </body> </html>
- ベストアンサー
- JavaScript
ＡＳＰ記述式
今、ＰＨＰの勉強をしているのですが・・最初の方でいきなりＡＳＰの記述式についてコードが書いていました。物凄く簡単なコードなのですが、下記のコードの中でＡＳＰ記述式の「はじめまして(*^_^*) 」だけが表示されません。どうしたら表示されるのでしょうか？ご教授よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head> <body> <p> <b>基本形:</b><br> <?php echo"はじめまして(*^_^*)"; ?> <p> <b>短縮形:</b><br> <? echo"はじめまして(*^_^*)"; ?> <p> <b>スクリプト記述形:</b><br> <script language="PHP"> echo "はじめまして(*^_^*)"; </script> <p> <b>Active Server Page(ASP)式記述:</b><br> <% echo"はじめまして(*^_^*)"; %> </body> </html>
- ベストアンサー
- Microsoft ASP
DOCTYPE宣言とdocument.body.clientHeight
お世話になります。ブラウザのサイズを取得するにはどうすればよいのでしょうか？ document.body.clientHeightで取得出来るのは分かりましたが DTDにより動作したり、しなくなるのも分かりました。 ×動作しない <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ○動作する <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 後者のものですとIEでは動作しますが、firefoxでは動作しません。何か対処法は、御座いませんでしょうか？一番望む形は <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> の宣言で、ブラウザサイズが取れるようになるのがベストです。 CSSを使用しているので<?xml version="1.0" encoding="UTF-8"?>を入れると表示モードが互換になるので・・・。対応したいブラウザはIE6.0、firefox,Safariです。一応ソース <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> function init(){ var bodyHeight = document.body.clientHeight; alert(bodyHeight); } </script> </head> <body onload="init();"> <div> ほげ </div> </body> </html>
- ベストアンサー
- JavaScript
ｊｓ　プロトタイプ
javascriptソースコード <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script src="fastclick.js"></script> <script> function print(str){ document.write(str + "<br />"); } function Car(manufact, name){ this.manufact = manufact; this.name = name; } Car.prototype.info = function(){return this.manufact + " " + this.name;}; document.write("<p>"); var car1 = new Car("Toyota", "PRIUS"); print(car1.info()); var car2 = new Car("Honda", "INSIGHT"); print(car2.info()); document.write("</p>"); </script> </body> </html> 23行目なのですが「 Car.prototype.info 」とありますがｊｓにおいてプロトタイプはオブジェクトだという事は認識しておりますがプロトタイプを宣言する意味は何があるのでしょうか？参考urlです。 http://www.ajaxtower.jp/js/function_class/index3.html
- ベストアンサー
- JavaScript
コールバック関数が上手くいかないです
こんにちは。ブラウザ上に70と表示させるため、以下のソースを書きましたがうまくいきません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript"> //<![CDATA[ function funcA(a) { alert(a + 10); } function funcB(b, func) { var x = b + 2; func(x); } function funcC(c){ var body = document.body; body.innerHTML = c * 10; } funcB(5,funcC); //]]> </script> </head> <body> </body> </html> どなたか詳しい方、ご教示お願いいたします。
- ベストアンサー
- JavaScript
文字数カウンタにsetIntervalを使うには
JavaScript初心者です。 JavaScriptで残り入力可能文字数を表示するカウンタを作成したのですが以下のプログラムだとコピペしたときカウントがされません。そこでsetIntervalを使ってカウントできるようにしたいのですがどのように「変数(省略可) = setInterval(関数名,ミリ秒)」を流用すればよいのかイマイチわかりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>文字のカウント</title> 　　<script type="text/javascript"></script> </head> <body> 　　<input type="text" name="title" size="50" maxlength="20" onkeyup="ShowLength(value)"><br /> あと<a id="inputlength">20文字入力できます</a> </body> </html> よろしくお願いします。
- ベストアンサー
- JavaScript
XHTML のタイトルが表示されません　ご教授おね
タイトル通りなのですがHTML のタイトルが上手く表示されず、本文の中に入ってしまっています。（cf,添付画像）　一番最初の所で躓いてしまいました、解説書の通り何度もやり直したのですが、原因が分からないのです・・・かなり初歩的なこととは思われますがよろしくお願いいたします！ソースは以下のとおりです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <titile>a</title> <style type="text/css"> </style> </head> <body> </body> </html> ＊ちなみにサンプルでは以下のとおりになっています。（サンプルをインストールすればしっかりと表示されるのです、同じなはずなのに僕が入力しますと上手くいきません） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>a</title> <style type="text/css"> </style> </head> <body> </body> </html>
- ベストアンサー
- CSS
ファイルサイズの取得について
初めてのJavaScriptです、宜しくお願いします。フレームページで左ページから右ページのファイルサイズを調べる事はできますか？ <script type="text/javascript"> function getSize(){ document.write(parent.rightFrame.document.fileSize); } </script> </head> <body> <p><a href="http://www.yahoo.co.jp" target="rightFrame">ヤフー</a></p> <p><a href="javaScript:getSize()">サイズ</a></p> </body>
- 締切済み
- JavaScript