ブラウザの識別

ブラウザはロードしたスクリプトに対して自身の情報を公開しています。
ここでは、このページを表示しているブラウザの情報をJavaScriptで知る方法を調査します。
クロスブラウザの実現には必須のテクニックです。

１．navigatorオブジェクトによるブラウザ識別

navigatorオブジェクトのappNameプロパティで、使用しているブラウザの種類を知ることができます。

現在のnavigator.appNameの内容は

navigator.appNameの使用例

２．navigatorオブジェクトによるブラウザ識別(その２)

navigatorオブジェクトのuserAgentプロパティでは、使用しているOSやブラウザの種類、バージョンなどの情報を知ることができます。

現在のnavigator.userAgentの内容は

navigator.userAgentの使用例

３．その他のnavigatorオブジェクトとブラウザ識別のまとめ

navigatorオブジェクトには、他にも以下のようなプロパティがあります。

ブラウザ識別には、navigatorオブジェクトのuserAgentプロパティが最適と思われます。
しかしブラウザによっての識別情報の規則性は乏しく、いくつかのプロパティを組み合わせて識別方法を実現しなければならないでしょう。
navigatorオブジェクトを使用したブラウザ識別のまとめはこちらです。

４．DOMの違いによるブラウザ識別

DOM(Document Object Model)への対応ブラウザの違いに注目して識別する方法です。
IEでしか動作しないdocument.allや、NN4でのみ動作するdocument.layersなどを組み合わせてブラウザの識別をします。
以下に、ブラウザの識別に使用できるDOMの要素を示します。
あなたのブラウザでは、Yesと表示されている要素が対応されています。

それぞれのブラウザのどのバージョンが対応しているかを表にしてみました。

document
要素の
プロパティ名

3.0X

4.0X

4.5
(Mac)

5.0X

5.5
(Win)

6.0

2.0X

3.0X

4.0X

4.X

6.0

7.0

all

○

getElementById

○

layers

○

images

○

この表から対応したいブラウザのバージョンを論理演算でチェックすることが可能です。
例えば、document.getElementByIdが対応していることをチェックすれば、IE5以上か、あるいはNN6以上のブラウザであることが識別できます。
DOMのdocument要素を使用したブラウザ識別の詳細はこちらです。

５．おまけ

こんなことも出来るようです。上手く使えばIEとNNのコードを見通しよく書き分けることができそうです。
どうしてこんなことが出来るのか？？まだ理解していません。
どんなことをやっているかはソースを見て下さい。

この部分は、IE以外で表示されます。
IEでは表示されません。
JavaScriptを書くときには、ちょっとテクニックが必要みたいです。