ブラウザに応じて処理を振り分けるブラウザに応じて処理を振り分けるJavaScriptは、バージョンによって動作がいろいろ異なるため、バージョンに応じた記述を行う必要があります。ここでは、その振り分けテクニックをいくつか紹介します。
<SCRIPT>タグのLANGUAGE属性によって処理を振り分けます。例えば、
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
document.write("IE4.0〜、NN3.0〜");
// -->
</SCRIPT>
とした場合、IE4.0以降、NN3.0以降でのみ、JavaScriptが実行されます。どのブラウザでどのLANGUAGEがサポートされているかは、LANGUAGE属性を参照してください。
navigator オブジェクトの appName と appVersion を調べて処理を振り分けます。app=="M" で ver==2 の時は、NN2.0を模倣したIE3.0だったりするので注意が必要です。<SCRIPT LANGUAGE="JavaScript"> <!-- app = navigator.appName.charAt(0); ver = navigator.appVersion.charAt(0); if (app == "N") { if (ver == 2) { document.write("Netscape Navigator 2.0X<BR>"); } else if (ver == 3) { document.write("Netscape Navigator 3.0X<BR>"); } else if (ver == 4) { document.write("Netscape Navigator 4.X<BR>"); } } else if (app == "M") { if (ver == 2) { document.write("Internet Explorer 3.0<BR>"); } else if (ver == 3) { document.write("Internet Explorer 3.0 or 4.0<BR>"); } else if (ver == 4) { document.write("Internet Explorer 4.X or 5.X0<BR>"); } } // --> </SCRIPT>以下に、それぞれのブラウザにおいてどういう値が返されるかの一覧を示します。Win95などの値はOSなどプラットフォームによって異なります。ここに載っていないブラウザの値をご存知の方はご連絡ください。【navigator.appNameの例】
ブラウザ 値の例 IE3.0/4.0/5.0(Win/Mac) Microsoft Internet Explorer NN2.0/3.0/4.0/4.6/(Win/Mac) Netscape 【navigator.appVersionの例】
※ それぞれのブラウザのappVersionの値と、その頻度(1999年6月時点)を、「とほほのＷＷＷ入門」へのアクセス数から調べてみました。
ブラウザ 個数 値の例 IE3.0X(Win) 3958 2.0 (compatible; MSIE 3.0; Windows 95) IE3.0X(Mac) 82 3.0 (compatible; MSIE 3.0; Mac_PowerPC) IE4.0X(Mac) 7 3.0 (compatible; MSIE 4.0p1; Mac_68000) IE4.0X(Win) 50930 4.0 (compatible; MSIE 4.0; Windows 95) IE4.0X(Mac) 1648 4.0 (compatible; MSIE 4.0; Mac_PowerPC) IE4.5X(Mac) 3262 4.0 (compatible; MSIE 4.5; Mac_PowerPC) IE4.5X(Mac) 1 4.5 (compatible; MSIE 4.5; Mac_PowerPC) IE5.0X(Win) 43518 4.0 (compatible; MSIE 5.0; Windows 98) NN2.X(Win) 66 2.01I [ja] (Win95; I) NN2.X(Mac) 36 2.02 [ja] (Macintosh; I; PPC) NN2.X(X11) 23 2.02 [ja] (X11; I; SunOS 5.3 sun4m) NN3.X(Win) 2435 3.03 [ja] (Win95; I) NN3.X(Mac) 1162 3.01 [ja] (Macintosh; I; PPC) NN3.X(X11) 1099 3.01 [ja] (X11; I; SunOS 5.5.1 sun4u) NN4.X(Win) 35627 4.5 [ja] (Win95; I) NN4.X(Mac) 9262 4.5 [ja] (Macintosh; I; PPC) NN4.X(X11) 3901 4.5 [ja] (X11; I; SunOS 5.6 sun4u)
- NNの場合は、純粋にそのバージョンが示されている。
- IEの場合は、IE5.0であっても、サポートするJavaScriptはNN4.0相当なので、先頭は4.0で始まり、その後に「(compatible; MSIE 5.0; ...)」と続く。
上記のように、appVersionから、そのブラウザのバージョンを調べるのはなかなか厄介です。そこで、ブラウザやJavaScriptのバージョンではなく、今から使おうとしているオブジェクトがサポートされているかどうかを調べる方法があります。これだと、JavaScriptをサポートするIEやNN以外のブラウザが出現した時でも対応できるので、オススメです。
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
document.write(document.images[0].src);
}
if (document.layers) {
document.write(document.layers[0].src);
}
// -->
</SCRIPT>