Cross Browser のための DHTML
最終更新日:

ブラウザ識別法

Cross Browser DHTML の基本はブラウザを認識することです。 これは以下の目的を持ちます。

DHTML に対応していないブラウザの認識

DHTML に対応してないブラウザからの参照は通常のページ (イメージ付きページとテキストのみのページのように) を表示するか警告を促す必要があります。 現在のところ DHTML を見られるブラウザは MSIE4.0以上 及び NC4.0以上 のブラウザです。 (このコーナではスクリプトを単純化するために、この判定はしません)

JavaScript1.2 の仕様の判別

Microsoft Internet Explorer4.0 と Netscape Communicator4.0 は共に JavaScript1.2 を サポートしていると表明していますが、両者の共通部分は ECMA-262 に規定されている JavaScript の文法とコア部分のオブジェクト定義のみで、 (正確にはどちらのブラウザも ECMA-262 に準拠していないメソッド又はオブジェクトも存在するようです) 肝心のスタイルシート等のオブジェクトのプロパティ・メソッド等は全くといって良いほど異なります。 この為に Cross Browser DHTML を実現するには両者の差を認識し、 対応したアクセス手段が必要です。

上記項目の内、前者のブラウザのバージョンの識別に関しては、ここでは採り挙げません。 それは、 DHTML を作成する場合 JavaScript1.2 の仕様が必須といっても良いぐらい前提となりますから、 全てのブラウザから見られるようにするには、一つのスクリプトで切替えるよりも DHTML用のページと通常のページの2つを作成し、該当ページからのリンク時点で切替える方が楽であると判断するためです。 この判定方法に関しては、「色々なバージョン(スクリプトの記述)」の項を参照して下さい。

ここでは、後者の JavaScript1.2 を前提として2つのブラウザを識別する他の方法について記述します。


識別法1 使用できるオブジェクトで判断する

この方法は、現在のところ DHTML で一般的に使用されている方法で、 「色々なバージョン」でも言及していますが、改めて紹介します。

両者の仕様で特徴的なオブジェクトは layers オブジェクトと all コレクションです。 そのため、どちらのオブジェクトがあるかを調べれば、どのブラウザからのアクセスかが簡単に分かります。

var brws='その他'
if  (document.layers) brws='Netscape4.0';
else if(document.all) brws='Explorer4.0';
alert('あなたのブラウザは'+brws+'以上ですね?');

これと同様のことは navigator オブジェクトのプロパティでも可能ですが、 この方法のメリットは判定結果を変数に設定せずに簡単にその場で判断できることです。

識別法2 ブラウザに判断させる

これは、各ブラウザの SCRIPT タグの仕様の差を利用した方法です。
各ブラウザの SCRIPT タグの language 属性は以下の通りです。

language の指定方法
ExplorerNavigator
省略省略
JavaScriptJavaScript
JavaScript+versionJavaScript+version
JScriptなし
<script language="JavaScript"><!--
function isBrowser(){ return 'Netscape4.0'; }
// --></script>
<script language="JScript"><!--
function isBrowser(){ return 'Explorer4.0'; }
// --></script>
<script language="JavaScript"><!--
function ex2(){
  alert('あなたのブラウザは'
        +isBrowser()
        +'以上ですね?');
  return false;
}
// --></script>

この手法のメリットは、同一のインターフェイスを提供すれば、 ブラウザの種類を自分で特定する必要がないため、 作成したコードが見づらくなりません。

これは、コーディングを各ブラウザ単位で独立して開発することの可能性を示唆しています。

但し、ポイントとなっている「JScript」の属性値ですが、 マイクロソフト社は正式に表明していますが、 Netscape社はこの値を認めないとは言っていないので、 将来共に使用できるか保証はありません。

また、 「JScript」は「JavaScript」のようにバージョン指定を認めていませんから、 バージョンの混在した環境では多少複雑になるかもしれません

 バージョンが混在する場合には、 「JScript」内では関数や変数定義以外の実行は避けた方が良いでしょうし、 また、prototype などの新しい文法の記述も避けなければなりません。

識別法3 オブジェクトで判断し、対応する関数を登録する

この方法は上記項目の折衷案です。 つまり、「識別法1」の方法はスクリプトのコードが比較的読みにくくなる欠点があり、 「識別法2」の方法は保証されていない language 属性を使用するので、 折衷案としてバージョンは使用できるオブジェクトの判断で行ないますが、 その結果としてスクリプトの一部を切替えるのではなく、 関数全体を切替える方法です。

<script language="JavaScript1.2"><!--
if(document.layers){
  isBrowser2 = function(){ return 'Netscape4.0'; }
} else if(document.all){
  isBrowser2 = function(){ return 'Explorer4.0'; }
}
function ex3(){
  alert('あなたのブラウザは'+
          isBrowser2()+'以上ですね?');
  return false;
}
// --></script>

この手法のメリットは SCRIPTタグを複数使用しない分多少見やすくなります。

デメリットは不用意にバージョン指定を忘れると ( IE3 にはバージョン指定に関するバグが含まれているものもあります。 ) 下位のバージョンのブラウザでエラーが発生します。 ( function 定義は 1.2 からです。 )


注意事項

複数のバージョンでも見られるようにする場合には、 「識別法1」で行なうのが最も確実と思われます。


(C)Copyright 1998 ShinSoftAll rights reserved.