はじめに
ブラウザの種類やバージョン、おのおののブラウザ独自の実装の違いを考慮し、同じように動作するスクリプトをクロスブラウザスクリプトと言います。本シリーズでは、クロスブラウザスクリプトを実現する方法について、順を追って解説しています。
前回までは、クロスブラウザスクリプトを実現する技法として、ブラウザの種類やバージョンを判断し、そのブラウザに最適化したスクリプトを実行するようにする方法について解説してきました。
今回は、その考え方を少し変えて、ブラウザがスクリプト内で使用するスクリプトをサポートしているかどうかを判断し、そのブラウザがサポートしているスクリプトを設定することによって、クロスブラウザスクリプトを実現する方法について解説していきます。
技法は違いますが、今回も前回までに解説してきたことをもとに進めていきます。必要に応じて前回までの内容も併せて参照してください。
過去の記事
- 第1回：ブラウザによるイベントの取り扱いの違いを吸収する
- 第2回：JavaScriptを使ってクライアントのOSに応じた処理を行う
- 第3回：ユーザエージェントからブラウザの種類やバージョンを判断する
- 第4回：ブラウザに合わせたスクリプトを実行する
- 第5回：ディスプレイサイズに合わせてブラウザの新しいウィンドウを開く
- 第6回：スタイルシートやレイヤーを操作する
サポートしているDOMによって、処理を振り分ける
Internet Explorerはバージョン4から、Netscape Navigatorはバージョン6からブラウザがDOMに対応しました。これらのブラウザでは、ブラウザ自身が持っている情報や機能をDOMのオブジェクトとして持っています。このDOMオブジェクトには、JavaScriptを使ってアクセスする方法が用意されています。そして、DOMオブジェクトにJavaScriptを使ってアクセスし、DOMが持つ値を取得したり、値を変更したりすることによって、ブラウザの見栄えやレイアウトなどの動的な変更や、ブラウザが持っている機能を呼び出すことができます。
DOM対応される前のブラウザでは、JavaScriptが取り扱えるのは、あくまでもブラウザがJavaScriptのオブジェクトとして用意しているオブジェクトのみでした。しかし、DOM対応されたブラウザであれば、ブラウザが持っている全オブジェクトに対し、JavaScriptを使ってアクセスすることができるのです。これにより、JavaScriptの可能性は格段に広がりました。今話題のAjaxなども、ブラウザがDOM対応されてなければ実現することはできなかったのです。
このように、大変便利で利用価値が高いDOMとJavaScriptの関係ですが、一筋縄では行かない部分があります。DOMへのアクセス方法に大きく分けて2種類の用法があり、ブラウザによってサポートしている用法に違いがあるのです。
2種類のアクセス方法
JavaScriptを使ってDOMにアクセスする方法には、大きく分けて「getElementById」メソッドを使う方法、「all」メソッドを使う方法の2種類があります。
例えば、次のようにif文の条件式にdocument.getElementByIdを設定したとき、getElementByIdをサポートしたブラウザであれば、if文内で設定されているスクリプトが実行されます。
if(document.getElementById){
「getElementById」に対応したブラウザでのみ実行されるスクリプト
}
また、次のようにif文の条件式にdocument.allを設定したときは、if文内で設定したスクリプトは、allメソッドをサポートしたブラウザでのみ実行されます。
if(document.all){
「all」に対応したブラウザでのみ実行されるスクリプト
}
それでは、試しに次のスクリプトをDOMに対応したいろいろなブラウザで実行してみましょう。
<script type="text/javascript"> <!-- if(document.getElementById){ document.write("「getElementById」に対応したブラウザ") } if(document.all){ document.write("<br>") } if(document.all){ document.write("「all」に対応したブラウザ") } //--> </script>
