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

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

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

半場方人[著]

更新日: 2008/08/26
公開日: 2007/10/23

ポスト

ダウンロードサンプルファイル (2.1 KB)

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

ポスト

はじめに

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

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

過去の記事

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;
        }
    }
}

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

・全ての過去記事が閲覧できます
・会員限定メルマガを受信できます

メールバックナンバー

新規会員登録無料

Page 1
- はじめに
- eventオブジェクトの実装の違いにより処理を振り分ける
Page 2
- AjaxにおけるXMLHttpRequesオブジェクトの取り扱い
Page 3
- Ajaxページの作成
- まとめ

次のページ
AjaxにおけるXMLHttpRequesオブジェクトの取り扱い

この記事は参考になりましたか？

印刷用を表示

ポスト

クロスブラウザスクリプトの作成テクニック連載記事一覧: ブラウザごとのwindowオブジェクトの違いを理解する

ブラウザごとのeventオブジェクトの違いを理解する

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

もっと読む

この記事の著者: 半場方人（ハンバマサヒト）

Netscape2.XでJavaScriptに初めて出合ったころ、「なぜJavaScriptの日本語の書籍が無いんだ」、とあちこちで嘆いていたら、じゃあおまえが書け、とお声がかかり、JavaScript関連の書籍を執筆するようになる。執筆に際していつも考えるのは、「JavaScript初心者だった頃の気持ちを忘れないよに」、ということ。主な著書は、「標準Webデザイン講座　JavaScript＆Ajax」(翔泳社)などがある。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事