この本のサンプルでは、様々なブラウザを互換させるために、各ブラウザで共通する機能を切り替えて動作するように作成したクロスブラウザ関数をたくさん使用しています。

N4用とIE用、W3-DOM対応ブラウザ用のスクリプトをまったく別に3本作って、別々のページで走らせることもできますがページを作るたびに、それぞれ複数ページの内容を同じに維持しつつ別のコードで作りづづけるのは大変です。この本が提供している関数群はそれらの労力の相当部分を解消して、あなたがもっと重要とすることがらに時間を使えるようにしてくれるはずです。なにしろコピーしてあなたのページへ貼り込むだけで複数のブラウザで互換するコードができあがるのですから。

ただ、ここで提供しているものは主に基本的なものだけです。スクリプトの作り方によっては、さまざまな手を加えたほうがうまく動くという場合も多いはずです。そこで、ここではフリーファンクションの使い方(改造の仕方)について簡単に説明しておきます。

1.そのまま使う
2.オブジェクト名で使う
3.getLayStyleOj()でらくらく使う

1.そのまま使う

たとえば、レイヤーを見えるようにする showLAYER() というファンクションは。


  function showLAYER(layName){                                    
    if(document.getElementById)         //e5,e6,n6,n7,m1,o6,o7,s1用
      document.getElementById(layName).style.visibility='visible'
    else if(document.all)               //e4用
      document.all(layName).style.visibility='visible'
    else if(document.layers)            //n4用
      document.layers[layName].visibility='show'
  }

という関数を

  <script type="text/javascript"> 
  と
  </script>

の間へ貼り込んで使います。

上のshowLAYER(layName)というファンクションはlayNameの部分にレイヤー名を指定して使うようになっています。ここでいうレイヤー名とはposition指定されたタグのID名のことです。たとえば、

    <div id='test' style='position:absolute;visibility:hidden'></div>

のid=の部分です。このレイヤーはvisibilityにhiddenが指定されているので、そのままでは見えなくなっています。そこで、

    showLAYER('test')

と書くと見えるようになるというわけです。

2.オブジェクト名で使う

上記のようにID名で指定すると単純でわかりやすいという利点があります。もっと、ソースをシンプルにする方法があります。たとえば、testというid名のレイヤーがあった場合、

  oj = document.layers['test']
  oj = document.all('test').style
  oj = document.getElementById('test').style

このように変数(ここではoj)に入れてしまって、その後、

  function showLAYERoj(oj){
    if(document.getElementById) oj.visibility='visible'
    else if(document.all)       oj.visibility='visible'
    else if(document.layers)    oj.visibility='show'
  }

と書けば、前述の関数に比べるとかなりすっきりしたソースになってきます。特にこのvisibilityの場合ではN4が値として'show'の替わりに他のブラウザと共通の 'visible'も使える(つまりW3CのCSSにも準拠している)ので、さらにシンプルに、

  function showLAYERoj(oj){
    if(!!oj) oj.visibility='visible'    //e4,e5,e6,n4,n6,n7,m1,o6,o7,s1用
  }

このように書くことも可能になります。驚くほどシンプルになりましたね。

ここで一つだけ注意しておきたいのは、最初の変数(ここではoj)に入れるコードを実行させるタイミングです。ページの読み込み中など、ページが構築される前に実行するとまだそれぞれのレイヤーがページ内に存在していないためエラーになる場合があります。そこで、ページ読み込み終了時、つまり、onload時に実行されるようにしておく必要があります。

  var oj
  
  function setOj(){
    oj = document.layers['test']
    oj = document.all('test').style
    oj = document.getElementById('test').style
  }

  <body onload="setOj()">

このように書くと、ページが読み込まれた時にsetOj()内にが実行されて目的のオブジェクトを安全にセットすることができるようになります。

3.getLayStyleOj()でらくらく使う

上記2の説明の中で、一つの変数へレイヤーオブジェクトを仕込む方法は、この本の中では主に getLayStyleOj() を利用しています。

  //--layNameで指定したスタイルオブジェクトを返す
  //  (必ずonload後に実行すること)
  function getLayStyleOj(layName){  
    if(document.getElementById)         //e5,e6,n6,n7,m1,o6,o7,s1用
      return document.getElementById(layName).style
    else if(document.all)               //e4用
      return document.all(layName).style
    else if(document.layers)            //n4用
      return document.layers[layName]
  }

この関数を使うと、使うレイヤーの数だけずらずらと各ブラウザ毎の代入文を書き並べる必要が無くなって、たとえば、

  test1 = getLayStyleOj('test1')
  test2 = getLayStyleOj('test2')
  test3 = getLayStyleOj('test3')

のように関数の引数へ目的のレイヤーのid名を書くだけで、test1～3のレイヤーが変数test1～3へセットされます。また、レイヤーを操作する時にも、

  showLAYERoj(getLayStyleOj('レイヤー名').id)

と書けば1のshowLAYER(layName)と書いたのと同じになり、

  showLAYERoj(getLayStyleOj('レイヤー名'))

と書けば2のshowLAYERoj(oj)と書いたのと同じ意味になります。
さらに直接

  getLayStyleOj('レイヤー名').visibility='visible'

と書くこともなどできますからダイナミックにいろいろ便利に使えます。