ブラウザがサポートしているスクリプトを判断する

クロスブラウザスクリプトの作成テクニック 第7回

使用できるスクリプト判断し、レイヤーかスタイルシートを表示する

　さて次は、前回の「ブラウザを判断し、レイヤーかスタイルシートを表示する」のサンプルを、ブラウザを判断するのではなく、使用できるスクリプトを判断して処理を振り分けるように変更したサンプルです。

Sample/sample_5.html

<script type="text/javascript">
<!--
if (document.layers){
  document.write("<layer name='LAY' width='300px' height='200px' left='50px' top='50px' bgcolor='Tan'>");
  document.write("レイヤー...");
  document.write("</layer>");
}
else{
  document.write("<div id='STY' name='STY' style='position:absolute; width:300px; height:200px; left:50px; top:50px; background:Tan'>");
  document.write("スタイルシート...");
  document.write("</div>");
}
//-->
</script>

実行結果

　使用できるスクリプトを判断し、レイヤーかスタイルシートを表示します。

Safariで実行した場合

Netscape Navigator 4で実行した場合

　今回も前回と同様、ウィンドウ上の上端から50ピクセル、左端から50ピクセルの位置に、高さ200ピクセル、横幅300ピクセルのスタイルシートを表示しています。また、Netscape Navigator 4.Xではレイヤーオブジェクトを表示しています。

　レイヤーオブジェクトが使えるかの判断は、条件式if (document.layers)で行っています。レイヤーオブジェクトがサポートされたNetscape Navigator 4.Xであれば、この条件式が真となり、分岐内のレイヤーを書き出す処理を実行します。

　その他のブラウザは、else内に設定したスタイルシートを書き出す処理を実行します。

まとめ

　今回は、実行するスクリプトをブラウザがサポートしているかどうかを調べ、それに合わせて用意したスクリプトを実行する方法について解説しました。この用法の利点は、ブラウザの種類やバージョンを気にする必要がない点にあります。

　前回まで解説してきたブラウザの種類やバージョンを判断し、それに合わせたスクリプトを実行する方法では、常に新しいブラウザの動向を確認し対応していく必要があります。例えばOpera 9は、ユーザーエージェントの見直しが行われたため、以前のバージョンと同じ用法ではブラウザを判断することができませんでした。しかし、今回紹介した方法ではそれを気にする必要はありません。

　次回も、実行するスクリプトをブラウザがサポートしているかどうかを調べ、それに合わせたスクリプトを用意することで、クロスブラウザスクリプトを実現する方法を解説していきます。