梅ちゃん堂 > JavaScript 入門 > JavaScript 実用編 >
- クロスブラウザなスクリプトのために -

WWW(ワールド・ワイド・ウェブ)にアクセスしている人の環境は様々です。 多くの人は WWW ブラウザを通じてホームページを閲覧します。 その中で JavaScript をサポートしているブラウザは、日本で普及している主なものだけでも、 Microsoft Internet Explorer、Netscape(Navigator)、Opera の3種類あります。 (もちろん JavaScript をサポートしているブラウザはこれだけではありませんが。)

従って JavaScript でコンテンツを作成する人は、最低限これらのブラウザをインストールして動作チェックしてみる必要があります。 しかもブラウザのバージョンも考慮しなければなりません。 特に Netscape はバージョン 3.x までと、バージョン 4.x(4.06 / 4.5)、 及びバージョン 6.x 以降とでは全く別のブラウザと言って良いほど JavaScript への対応が異なります(特に DHTML への対応に違いがあります)。

JavaScript のプログラムを作成する場合、まずメインのブラウザを決めて動作を試しますが、 次に他のブラウザでもチェックしてみる必要があります。 或るブラウザでは動作するが、他のブラウザでは正常に動作しない場合(これはよくあることです)、対応の仕方は2つあります。

その1つは、「このホームページ(コンテンツ、プログラム)は ***** で動作チェックしています。 他のブラウザでは、正常に動作しない可能性があります。」と断りを入れることです。 ほかに解決方法がないなら、これで仕方がないと思います。

でも出来れば多くの訪問者に見てもらいたいので、もう1つの対応は、 多くのブラウザに対応するようなプログラムを作ることです。たとえそれが無理な場合でも、 非対応ブラウザで見ている人が重大なエラーに遭遇することがないような工夫をしたいものです。

或るオブジェクト、ないしオブジェクトに属するメソッドや、プロパティ、イベントが、 或るブラウザのスクリプト実行エンジンによってサポートされているかどうかを簡単に判別する方法を伝授しましょう。 この方法を使えば、プログラムテストでエラーを引き起こすことなく、サポートされていないメソッドや、プロパティ、 イベントを見つけだすことが出来ます。

<SCRIPT type="text/javascript">
check = ここにチェックしたいメソッド、プロパティ、イベント名を入れる;
document.write((typeof(check) == "undefined") ? "サポートされていません" : "サポートされています");
</SCRIPT>

例:
<SCRIPT type="text/javascript">
check = window.print;
result = typeof(check);
document.write((result == "undefined") ? "サポートされていません" : "サポートされています:" + result);
</SCRIPT>

現在使用しているブラウザが window.print() というメソッドをサポートしているなら、 下に「サポートされています:」と表示されているはずです。

注意すべき点は、メソッドの場合もここでは必ず ( ) を省くことです。 うっかり check = window.print( ); などと入れると常に「サポートされていません」になってしまいます。

typeof ( ) というメソッドは、引数に入れたオブジェクト、メソッド、プロパティ、イベント名、 並びに変数がブラウザのスクリプト実行エンジンによってサポートされていれば "object"、"function"、"string", "number" といった値を返し、 さもなければ "undefined" を返します。

この機能を使えば、プログラムで使われるメソッドやプロパティをクライアントのブラウザがサポートしているかどうかを、 ブラウザの種類やバージョンを参照することなくチェックできます。

例:
if (typeof(navigator.cookieEnabled) != "undefined")
document.write(navigator.cookieEnabled ? "「クッキーが有効です。」" : "「クッキーが無効です。」");
// navigator.cookieEnabled というプロパティが未定義でなければその値を使って判定する

最近よく見かけるのは DHTML プログラムで使われる、

if (document.all) ........
else if (document.layers) ........
else if (document.getElementById) ........

という判定方法で、document.alldocument.layersdocument.getElementById もプロパティですが、 同時に if (プロパティ名) という構文でプロパティがサポートされていれば true を、 サポートされていなければ false を返すという JavaScript の特質を示しています。

これを使えばブラウザの違いを即座に嗅ぎ分けられるかのように書いている人もいますが、 それは正しくありません。なぜなら Opera が document.alldocument.getElementById の両方をサポートしていること、 internet Explorer もバージョン 5 以降は document.all と同時に document.getElementById もサポートするようになったという複雑な事情があるからです。

特に DHTML に関してブラウザ間の違いは一筋縄ではいかないところがあるので、 やはりブラウザ名(とそのバージョン)を取得する必要はあるようです。

ブラウザ名とそのバージョンの取得方法については次の章で書きます。

前ページに戻る 前ページに戻る 次ページに進む
Copyright © 2003 梅ちゃん堂. All Rights Reserved