Javascriptでブラウザ振り分けする方法とは？

2010/09/16 06:39

このQ&Aのポイント

Javascriptを使ってブラウザの振り分けを行いたい場合、IE7以下とIE8以降の判定が必要です。
一番簡単な方法は、navigator.appVersionを使って判定することですが、IE5の判定しかできません。
IE7以下とIE8の振り分けを行いたい場合、別の方法を探す必要があります。

buzinesswa
お礼率42% (50/117)

JavaScript
回答数5
ありがとう数8

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

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

ベストアンサー

zeff
ベストアンサー率69% (137/198)

2010/09/16 16:41 回答No.3

試しに、 <html lang="ja"> <head> <title>NoTitle</title> <script type="text/javascript"> (function(){ var flag; /*@cc_on @if(@_jscript_version >=5.8) flag = true; @else flag = false; @end@*/ if( 'undefined' == typeof flag ) window.location.href = "http://www.google.co.jp/"; else{ if( flag ) window.location.href = "http://www.yahoo.co.jp/"; else window.location.href = "http://jp.msn.com/"; } })(); </script> </head> <body> </body> </html> とやってみたらちゃんとジャンプしましたが、 Firefox,Google Chrome,Operaは一瞬で行ってくれるが、 IE8はもっちゃり元ページの余韻を残しつつ移動する感じです。 IE7は持ち合わせていないので未確認です。でもIE7以下以外はページ遷移しなくていいのでは。透過PNGってIE8とIE以外ではちゃんとしてるんですよね、知らないけど。 IE7以下かどうかだけ確認するなら、こうかなぁ。 <html lang="ja"> <head> <title>NoTitle</title> <script type="text/javascript"> (function(){ //@cc_on var flag = /*@if(@_jscript_version < 5.8)!@end@*/ false; if( flag )//IEのver7以下だけtrue,それ以外はfalse window.location.href = "ie8ika.html"; })(); </script> </head> <body> </body> </html> 根源は、 pngfix.jsが他のスクリプトとバッティングしてるとかそういうのが原因じゃ。ぜんぜんわかんないので詳しい人に任せますが。

質問者

お礼 2010/09/17 04:47

返答ありがとうございます。 <html lang="ja"> <head> <title>NoTitle</title> <script type="text/javascript"> (function(){ //@cc_on var flag = /*@if(@_jscript_version < 5.8)!@end@*/ false; if( flag )//IEのver7以下だけtrue,それ以外はfalse window.location.href = "ie8ika.html"; })(); </script> </head> <body> </body> </html> 上記の書き方でうまく動作しているみたいです。暫くはこれでしのごうかと思います♪

その他の回答 (4)

yyr446
ベストアンサー率65% (870/1330)

2010/09/16 18:42 回答No.5

「CSS を「正しく」直せばどのブラウザでも「正しく」解釈する」という事で、透明PNG画像の問題だけなら、IE独自のfilterを使ってしまえ！振り分けいらんだろう？ { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( Src=xxx.png, SizingMethod=scale); } とか、style属性で、　style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='xxx.png', sizingMethod=scale);"> http://www.htmq.com/style/filter.shtml http://write-off.cside.com/scripts/55filter/alphaimageloader.htm だめだ、やっぱりCSS振り分けがいる。 PNG問題に限らず、IE9ベータでも、あいかわらずIE独自のアルファー処理の問題は尾を引いている。

質問者

お礼 2010/09/17 04:51

ご返答、有難う御座います。 IEは本当に困りますよね・・・ IEユーザーが減ってる傾向になるのかも分かりませんし・・・ホームページ作る上でかなり二度手間です（涙

Chaire
ベストアンサー率60% (79/130)

2010/09/16 18:13 回答No.4

まず、半透明 PNG は IE5.5 からサポートされていますが、初期設定で無効になっています。質問者さんが仰る pngfix.js がどれか不明ですが、多くの場合、ページ内で拡張子 .png を持つ img 　<img alt="..." src="sample.png" width="..." height="..."> これを次のように書き換えます。　<span style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sample.png'); 　　display: inline-block; width: ...px; height: ...px; "></span> 書き換えは文書の読み込み時に行われますので、その後に追加された画像には適用できません。しかし、その辺を工夫しているものもあった気がします。いずれにせよ、IE7 からは半透明 PNG が初期設定で有効なので、多くのスクリプトは最初の判定で IE7 以上を除外しています。ですから IE7 で「透過 PNG が使えない」というのは、何らかのミスか見落としであるように思います。 ※フィルタを組み合わせると半透明 PNG がうまく表示されない、などの不具合は報告されていますが。 --- とにかく、IE7 と IE8 を振り分けて何をするのかによりますが、No.1 で例示した条件付きコメントを使えば、両者に別々のスタイルシートを提供できます。もし UA 署名を見てページそのものを変えるのであれば、ブラウザ側の JavaScript ではなくサーバ側のプログラムでやって下さい。飛ばすためのダミーページをいちいちダウンロードさせるのは無駄ですし、そもそもスクリプトが無効になっている可能性もあります。条件付きコメントで <meta http-equiv="Refresh" ...> を出すのも、苦し紛れの最後の手段としてはアリでしょう。 --- No.2-3 条件付きコンパイルは、プログラムの実行前に条件分岐してコードを生成する、つまり、プログラムの実行時には分岐が跡形もなくなっているからこそ、無駄なく高速に実行できるのです。プログラム実行時に余計な分岐を残すようでは、条件コンパイルを使う意味がありません。 /*@if (@_jscript_version >= 5.8) 　// （だいたい）IE8 以上 @elif (@_jscript_version >= 5.7) 　// （だいたい）IE7 以上 @elif (@_jscript_version >= 5.6) 　// （だいたい）IE6 以上 @elif (@_jscript_version >= 5.5) 　// （だいたい）IE5.5 以上 @elif (@_jscript_version >= 5.0) 　// （だいたい）IE 5.0 以上 @elif (@_jscript_version >= 3.0) 　// （だいたい）IE 4.0 以上 @elif@*/ 　// 条件付きコンパイルを知らない IE 3.0、および他のブラウザ /*@end@*/

質問者

お礼 2010/09/17 04:50

返答有難う御座います。それに態々各verの振り分けまで・・・感謝しています。 pngの問題だけでなく、cssでposionも使ってましてレイアウト自体もIEで見るとボロボロでして（涙涙涙 IE8で確認したら普通なんですが IE7だと・・・orz 後々はcssで全て対応していくつもりですが現状では時間的な問題から応急手当をしています。スクリプト、参考になりました♪ 有難う御座います。

zeff
ベストアンサー率69% (137/198)

2010/09/16 10:35 回答No.2

JScriptのversionによって分岐するとか。 <script type="text/javascript">  </script> </head> <body> </body> </html> http://msdn.microsoft.com/ja-jp/library/7142yyxw.aspx

質問者

補足 2010/09/16 14:26

ご返答有難う御座います。上記の場合、ページ別にするには if( 'undefined' == typeof flag ) { window.location.href = "no-ie.html"; }else{ if( flag ){ window.location.href = "ie8ijou.html"; }else{ window.location.href = "ie8ika.html"; } となりますかね？間違えてましたらご指摘お願い致します。

Chaire
ベストアンサー率60% (79/130)

2010/09/16 08:34 回答No.1

振り分けをする目的は何ですか？例えば、よくブラウザごとに CSS を振り分けるスクリプトというのがありますが、スクリプトエンジンの特徴で、レイアウトエンジンを振り分けるのは、あまり賢い方法とは言えません（それに、CSS を「正しく」直せばどのブラウザでも「正しく」解釈するものを、直さずにブラウザのせいにしているケースも少なくない）。また、IE8 には IE8 モード・IE7 モード・IE5 モードの 3 つの文書モードがありますので、UA 署名で IE8 だと判明しても、実は IE5 モードで動いている、という可能性もあります。IE7 にも標準モード・互換モードの 2 つのブラウザモードがあります。ですから、目的が分からないと適切な回答を得るのは難しいでしょう。 --- とりあえず、IE8 で文書モードを知るには document.documentMode を調べて下さい。値は 5、7、8 のいずれかです。IE9 には IE9 モードが導入され、値は 9 です。 IE7 には documentMode がありませんが、document.compatMode でブラウザモードが分かります。"CSS1Compat" なら標準モード（IE7 モード）、"BackCompat" なら互換モード（IE6 の標準モードに相当）です。document.compatMode は IE6 から導入されたものですが、IE6 における "CSS1Compat" は IE6 標準モード、"BackCompat" は IE5 モードです。そういうわけで、IE の開発者は基本的にブラウザ分岐を避けた方が良い、と言ってます（参考リンク）。ブラウザで分岐するのでなく、特徴で分岐しろ、と。まあ、これも状況によるのですが。 --- IE 独自の仕組みに条件付きコメントというのがあります。   これも多用すべきではありませんが、目的によってはヒントになるでしょう。 --- JavaScript の質問場ということでなら、IE8 から導入された新機能（querySelector() など）や、IE8 で修正された振る舞い（getAttribute() など）は、IE8 モードでしか動きません。そのためにモードを確認するのは意味のあることです。 ※最近、Microsoft のサイトにある DHTML リファレンスは IE9 の新機能を反映させましたが、それを眺めてると、これは本当に IE なのか？と思いたくなるほど変わりましたね。しかしそれでも、単純にモードを見るだけでは分からないものもありますし、まして UA 署名では穴が大きすぎて基本的に使いものになりません。そういうわけで、繰り返しますが目的がはっきりしないと、適切な判別手段を答えるのは難しいと思われます。

参考URL：: http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx

質問者

補足 2010/09/16 14:21

ご返答有難う御座います。利用目的としてはホームページを組んだ後にブラウザによって、pngの透明化が使えない事が判明しまして・・で、急遽ブラウザによってページを振り分けなければならなくなりました。 pngfix.jsを使ってみたのですが、どうもpng数が多いのか上手く動作しないのでブラウザを振り分ける事に致した次第です。 IE8 の 3 つの文書モードについては無視で問題ありません。上記が目的になりますが最善な方法は何か別にありますでしょうか？

Javascriptでブラウザ振り分けする方法とは？

Javascriptでブラウザ振り分け。