P-0023 JavaScript の簡単ブラウザ判別

閲覧者のブラウザ判別に JavaScript を使うケースが多いですが、いちいち判定スクリプトを長々と書くのはめんどくさいものです。が、実はほんの少しの記述で IE と NN を判別することができます。

• IE 4 以上かどうかを調べる
• NN 4.x かどうかを調べる
• IE か NN かを調べる
• 応用

InternetExplorer 4.x 以上かどうかを調べる

「 document.all 」を使う

if ( document.all ) {
  document.write(' このメッセージは IE 4 以上用です ');
} 

オブジェクト「 document.all 」は IE 4 以上のみの独自拡張なので、 IE 4 以上であればこれで判別可能です。

「 type="text/JScript"」を使う

<script type="text/ JScript ">
  document.write(' このメッセージは IE 4 以上用です ');
</script>
<script type="text/ JScript " src="scripts/ie.js"></script>

スクリプトタイプは普通「 JavaScript 」を使いますが、 IE のみ対応の独自拡張スクリプト「 JScript 」を指定すれば、そのスクリプトは IE でのみ実行されます。

PageTop

NetscapeNavigator （ Communicator ） 4.x かどうかを調べる

if ( document.layers ){
  document.write(' このメッセージは NN 4.x 用です ');
} 

オブジェクト「 document.layer s 」は NN 4.x のみの独自拡張なので、 NN 4.x であればこれで判別可能です。

PageTop

IE か NN かを調べる

if (navigator.appName.indexOf('Microsoft') > -1) {
  document.write(' このメッセージは IE 用です ');
} else if (navigator.appCodeName = 'Mozilla') {
  document.write(' このメッセージは NN 用です ');
} else {
  document.write(' このメッセージは IE/NN 以外用です ');
} 

PageTop

応用

特別に判定の必要があるのは IE と NN, IE 3, NN 4 くらいなので、スタイルシートの切り替えなどの場合なら、以下のような感じで事足りるでしょう。

if (navigator.appName.indexOf('Microsoft') > -1) {
  if (document.all) {
    style = 'IE 4, 5';
  } else {
    style = 'IE 3';
  }
} else if (navigator.appCodeName = 'Mozilla') {
  if (document.layers) {
    style = 'NN 4.x';
  } else {
    style = 'NN2, 3, 6';
  }
} 

ちなみに IE と NN の中では、 IE 4/IE 5/NN 4.x/N 6 だけがスタイルシートに対応しています。 Amaya や Opera なども判定する場合は、さらに分岐を加える必要があります。

B:Back