Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

eventオブジェクトとXMLHttpRequesオブジェクトの取り扱い

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/10/23 14:00

ブラウザの種類やバージョン、ブラウザ独自の実装の違いを考慮し、同じように動作するスクリプトを「クロスブラウザスクリプト」と言います。ここではブラウザがサポートしているスクリプトを判断しながら、処理を実装していく方法について紹介します。

目次

はじめに

 ブラウザの種類やバージョン、ブラウザ独自の実装の違いを考慮し、同じように動作するスクリプトを「クロスブラウザスクリプト」と言います。ここでは、クロスブラウザスクリプトを実現する方法について、順を追って解説してきています。

 クロスブラウザスクリプトを実現するのには、いろいろな方法があります。その中で前回は、ブラウザが実行スクリプトをサポートしているかどうか判断し、そのサポートに応じたスクリプトを実行することによって、クロスブラウザスクリプトを実現しました。今回も前回に引き続き、ブラウザがサポートしているスクリプトを実行する方法について解説していきます。

過去の記事

eventオブジェクトの実装の違いにより処理を振り分ける

 まずは、

 サンプルです。これは前回・前々回のサンプルを元にしているので、そちらもあわせて参照してください。

Sample/Sample_1/Sample_1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>Sample_1</title>
    <script type="text/javascript">
<!--
var UA=navigator.userAgent;
function eve(e) {
    if (e){
       if (document.layers){
            document.layers["LAY"].left=e.pageX;
            document.layers["LAY"].top=e.pageY;
       }
       else{
              document.getElementById("STY").style.left=e.pageX;
              document.getElementById("STY").style.top=e.pageY;
       }
    }
    else{
        if (event){
            document.all("STY").style.left=window.event.offsetX;
            document.all("STY").style.top=window.event.offsetY;
        }
    }
}
document.onmousedown = eve;
//-->
    </script>
    <style type="text/css">
<!--
body { background-color: #ffffff; }
-->
    </style>
  </head>
  <body>
<!-- クリックした位置へスタイルシート(レイヤー)を移動する -->
    <script type="text/javascript">
<!--
if (document.layers){
    document.write("<layer name='LAY' width='250px' height='100px' 
                     left='50px' top='50px' bgcolor='Tan'>");
    document.write("レイヤー...");
    document.write("</layer>");
}
else{
    document.write("<div id='STY' name='STY' 
          style='position:absolute; width:250px; height:100px; 
          left:50px; top:50px; background:Tan'>");
    document.write("スタイルシート...");
    document.write("</div>");
}
//-->
    </script>
  </body>
</html>

 今回のサンプルも前々回と同様、まずレイヤー(またはスタイルシート)を表示します。レイヤーオブジェクトをサポートしたNetscape Navigator 4.Xではレイヤー、その他のブラウザではスタイルシートを使用します。そして、マウスボタンが押されたイベントが発生した際、マウス位置の値を取得し、その位置へレイヤー(スタイルシート)を移動するようにしています。

 以前解説した通り、Internet ExplorerとNetscape Navigatorでは、イベントの取り扱いに違いがありました。この違いを吸収してクロスブラウザスクリプトを実現するため、前々回のサンプルではブラウザに応じて実行スクリプトを変えていました。それに対し、今回はブラウザが設定しているスクリプトをサポートしているかどうかを判断し、サポートしている場合は設定したスクリプトを実行するようにしています。

レイヤー(スタイルシート)部分

 レイヤー(スタイルシート)を書き出しているのは41~54行目(コメント「クリックした位置へ~」以降のscriptタグ内)となります。ここではブラウザではなく、ブラウザがサポートするスクリプトで処理を切り分け、幅250×高さ100ピクセルのレイヤー(スタイルシート)をブラウザの表示領域左端から50ピクセル、上から50ピクセルの位置に表示しています。

イベント部分

 次は「マウスをクリックした時に、クリックした位置にレイヤーを移動する処理」です。これも前々回と同様、まずは28行目でdocument.onmousedown = eveとしてマウスボタンが押されたイベントをとらえ、関数「eve」を実行します。

 取得したイベントから、イベントに関する各種情報を取得するにはeventオブジェクトを使います。しかしeventオブジェクトの用法には大きく分けて、

  • 変数.プロパティとして、変数から各種値を取得する方法
  • window.event.プロパティとし、eventを使用して各種値を取得する方法

 の2種類あります。このうち、「変数.プロパティ」として値を取得する方法は、Netscape Navigator 4.XやFirefoxを含むMozilla系ブラウザ、Opera、Safariがサポートしています。また、「window.event.プロパティ」として各種値を取得する方法はInternet Explorer、Opera、Safariがサポートしています。つまり、OperaとSafariは両方の方法をサポートしていることになります。

eve関数

 それでは関数eveの処理を見ていきましょう。処理の最初、function eve(e)の部分でイベントの持つ値を変数「e」に代入しています。変数から値を取得する場合は、この変数「e」から取得することになります。

 次に処理を振り分ける部分です。サンプルでは変数から値を取得する方法用のスクリプトを用意した後、eventを使用する方法用のスクリプトを実行するようにしています。

 変数から値を取得する方法をサポートしているブラウザは、11行目のif文の条件式if (e)が真となります。そして、12~19行目の変数から値を取得する方法を使用したスクリプトを実行します。このスクリプトは、Internet Explorer以外のブラウザが処理を行うことになります。

 そして、この処理を実行するブラウザのうち、Netscape Navigator 4.Xはレイヤーに、その他のブラウザはスタイルシートに、移動先となるX軸・Y軸の値を設定することになります。

Layerオブジェクトのサポート判定

 サンプルでは、12行目でif (document.layers)として、ブラウザがLayerオブジェクトをサポートしているかどうか調べています。このif文が真の時、13・14行目のLayerオブジェクトを使用したスクリプトが実行されます。Layerオブジェクトをサポートしたブラウザは、Netscape Navigator 4.Xしか存在しないので、このスクリプトは、Netscape Navigator 4.Xのみ実行されることにまります。それ以外の変数から値を取得する用法をサポートしているブラウザは、else以降、17・18行目のスクリプトが実行されます。

DOMによる操作

 else以降ではDOMの用法を使い、style要素に対し表示位置に関する値を設定しています。前回の記事で解説した通り、JavaScriptを使って、DOMの値を操作するには、

  • getElementByIdメソッドを使う方法
  • allメソッドを使う方法

 の2種類がありました。しかし、変数から値を取得する方法を使ったスクリプトを実行するブラウザの中には、allメソッドに対応したInternet Explorerは含まれていません。そこでここでは、DOMの用法のうちgetElementByIdメソッドを使って、style要素に値を設定しています。

 以上が、イベントが発生した位置の値を取得する方法のうち、変数から値を取得する方法に関する処理です。

eventを利用した処理

 そして最初のif (e)に対応するelseブロック、22~25行目の処理が「event」を使用する方法のための処理となります。「event」を使用する方法をサポートしているブラウザは、20行目のif文の条件式if (event)が真となり、if文の処理を実行します。

 ここのスクリプトは、現在のところInternet Explorerしか実行されません。そのためここでは、allメソッドを使った処理のみを設定しています。ただ、allメソッドはInternet Explorer独自の用法ですが、今後allメソッドをサポートしていないブラウザが、この部分を実行してしまう可能性もあるので、厳密には次のようにgetElementByIdメソッドを使った処理も用意しておいた方が良いでしょう。

if (event){
    if(document.getElementById){
        document.getElementById("STY").style.left=window.event.offsetX;
        document.getElementById("STY").style.top=window.event.offsetY;
    }
    else{
        if(document.all){
            document.all("STY").style.left=window.event.offsetX;
            document.all("STY").style.top=window.event.offsetY;
        }
    }
}

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 半場 方人(ハンバ マサヒト)

    Netscape2.XでJavaScriptに初めて出合ったころ、「なぜJavaScriptの日本語の書籍が無いんだ」、とあちこちで嘆いていたら、じゃあおまえが書け、とお声がかかり、JavaScript関連の書籍を執筆するようになる。執筆に際していつも考えるのは、「JavaScript初心者だった頃...

バックナンバー

連載:クロスブラウザスクリプトの作成テクニック

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5