ブラウザとバージョンのチェック


JavaScript を使うと、ユーザーが使用しているブラウザ (この場合、JavaScript を解釈実行できるブラウザ、つまり Netscape Navigator 2.0 以上か Internet Explorer 3.0 以上) やそのバージョン、コードネームなどを簡単に取得することができます。
例えばHTMLの<BODY>〜</BODY>タグの中の適当な場所に、次のように書き込んでみます。
(コピーして、貼り付けても結構。)

<SCRIPT Language="JavaScript">
<!--
Br = navigator.appName;
Ver = navigator.appVersion;
if (Br == "Netscape")
{
Br= "Netscape Navigator";
Ver = Ver.substring(0,4);
}
else if (Br == "Microsoft Internet Explorer")
{
Br = "Internet Explorer";
x = Ver.indexOf("MSIE",0);
if (Ver.substring(x+8, x+9) == ";")
Ver = Ver.substring(x+5,x+8);
else Ver = Ver.substring(x+5, x+9);
}
document.write("<STRONG>「あなたがお使いのブラウザは ",Br," のバージョン ",Ver," です。」</STRONG>");
//-->
</SCRIPT>

こうすると、

と表示することができます。
しかし、これだけではちょっと芸がありません。ユーザーにしてみれば、「だからどうした?」ということになってしまいます。 もっとひねりましょう。

実はブラウザやそのバージョン情報の取得は、ユーザーにわざわざひけらかすためのものではなく、もっと別の目的、 つまりスクリプトの使用目的そのものに応用することで初めて活かすことができます。
あなたがHTMLでホームページを作るときには大抵は或るブラウザ、 つまり多くの場合 Netscape か Internet Explorer で見られることを意識して作っていると思いますが、 実際にはユーザーがどのブラウザを使うかはわからないわけです。
例えばフローティング・フレームや MARQUEE、BGSOUND のように Internet Explorer でしかうまく表示されないタグ、 或いは VBScript などを使用している場合には、それを使用しているページにアクセスさせるときに、 navigator.appNameでブラウザ名を取得し、"Microsoft Internet Explorer"か否かによってメッセージを表示するなり、 ページを分岐させればよいのです。逆に Netscape でしか実行できないような JavaScript を使用しているときには、 ブラウザ名が "Netscape" かどうかによって対応します。
また最近よく見かけるスタイル・シートなどを使用する場合には、 NNであれIEであれ上位バージョンでしか正しく表示されませんから、navigator.appVersion でバージョンを取得して表示方法を変えたほうがいいと思います。

具体的には、Internet Explorer 用のHTMLファイルと Netscape 用のHTMLファイルを用意しておき、 HTMLの</TITLE>と</HEAD>の間に両者へのアクセスを分岐させる関数を定義します。

<SCRIPT Language="JavaScript">
<!--
var IE = "(IE 用のHTMLファイル名)";
var NN = "(Netscape 用のHTMLファイル名)";

function appCheck(){
Br = navigator.appName;
if (Br == "Microsoft Internet Explorer") location.href = IE;
else if (Br == "Netscape") location.href = NN;
}
//-->
</SCRIPT>

そしてボタンを押すとユーザーのブラウザを判別して、それに適したページにジャンプさせるのなら、おなじHTMLの <BODY>〜</BODY>内に次のように記述します。

<FORM>
<INPUT type = "button" value="(適当な言葉を入れます)" onClick="appCheck()">
</FORM>

もしボタンでなく、通常のアンカーで同じことをしたいのであれば、次のようにします。

<A href = "javascript:appCheck()"> クリック(適当な言葉を入れます) </A>

もし Internet Explorer か Netscape かによって表示を区別したいページがホームページの最初にあり、 フロントページをロードした時点でこの区別を実行したいのであれば、そのHTMLファイルの<BODY>タグの中に onLoad="appCheck()" を書き加えればいいのです。 例えば、

<BODY bgcolor="#FFFFFF" onLoad="appCheck()">

などとします。これでユーザーがあなたのホームページにアクセスしたとき、ブラウザによって最適のページにジャンプできるようになりました。 無論この場合、そのHTMLファイルには JavaScript を実行できないブラウザのための内容を入れておくことを忘れないで下さい。




次のトピックは「デジタル時計を作る」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで