Win版のieとMac版のIE、N4やN6,N7、そしてMozillaやOpera、SafariなどのJavaScriptやDHTMLを互換させるためには、
各ブラウザのリファレンスには載っていないいくつかのテクニックが必要となります。もちろん、この本では、そのテクニックをあらかじめ織り込んだCD-ROMのソースをコピーするだけで使えてしまうわけですが、ここでは、その基本的な処置方法について説明します。
1.css2のpositioning(昔のcss-p)に準拠する
NNとIEやMozilla、Opera、Safariなどで共通で文字や画像などを動かせる状態にするには
CSSのpositionプロパティを使用してレイヤーを作り
、そのレイヤーを操作するという方法を用います。
最新のDOMに準拠したブラウザなどによっては、
この方法を使わずにダイレクトに操作できるものもありますが、
現状利用されているより多くのブラウザで同じ
DHTMLを動作をさせたいと思うなら今のところこれが安全で確実な方法といえます。
例.レイヤー"test"を作る
<style type="text/css">
#test { position:absolute }
</style>
<div id="test">text</div>
CSSのpositionを指定することでレイヤーを作ることができます。
ここでは、absoluteを使って絶対位置指定が行えるようにしています
(relative相対位置指定はブラウザによって解釈が異なるのであまりお勧めしません)。
こうして作られたレイヤー"test"はたとえば、次のように書くとjavascriptからアクセスできるようになります(id名は名前でアクセスする際には必須です)。
例.N4でのレイヤー"test"表記方法
1.document.layers.test
2.document.layers['test']
3.document.layers[index番号]
//もし'test'がそのページの最初のレイヤーならindex番号は0
例.IEでのレイヤー"test"表記方法
1.document.all.test.style
2.document.all('test').style
3.document.all(index番号).style
//もし'test'がそのページの最初のタグならindex番号は0
例.W3C-DOMサポートブラウザの場合(IE5以降、N6以降、Mozilla1、Opera6、Safari1以降)
1.document.getElementById('test').style
そこで、このレイヤー"test"を画面左から100ピクセルの位置に動かしたい時は
JavaScriptでブラウザ分岐(注)を使ってたとえば、
例.画面左から100ピクセルの位置に動かす
if(document.getElementById){ //e5,e6,n6,n7,m1,o6,o7,s1の場合
document.getElementById(layName).style.left = 100
else if(document.all)document.all('test').style.left=100 //e4の場合
else if(document.layers)document.layers['test'].left=100 //n4の場合
というような書き方をするとN4,N6,N7,Mozilla,IE4,5,6,Opera6,7,Safari1ともに動作します。
(実際には、レイヤーtestJrが構築される前には動かせないので関数などにまとめて書いておいてページ構築後に動かします)
Sample : この本では、このx座標とy座標の指定をひとつの関数にまとめた
moveLAYER()を用意してあります。
更に、この document.getElementById(layName).style と document.layers['test'] と document.all('test').styleを同じ名前の変数に格納して表記をシンプルにする方法もあります。これは、同じオブジェクト(ここではレイヤー"test")を何度も使うときにソースがシンプルになるので便利です。
例.画面左から100、上から50ピクセルの位置に動かす
var testoj //レイヤーオブジェクトを入れるための変数
if(document.getElementById){ //e5,e6,n6,n7,m1,o6,o7,s1の場合
testoj = document.getElementById(layName).style.left
else if(document.all)
testoj = document.all('test').style.left //e4の場合
else if(document.layers)
testoj = document.layers['test'].left //n4の場合
testoj.left=100 //左から100pxへ動かす
testoj.top=50 //上から 50pxへ動かす
testoj.left=150 //左から150pxへ動かす
testoj.top=250 //上から250pxへ動かす
Sample : この応用例は、
moveLAYER()の下の方に書いてある
「オブジェクト名で処理する場合」をご参照下さい。
2.LAYERタグのかわりにCSSのpositionを使用する
N4の独自タグであるLAYERはCSSでサポートされていません。
しかし、N4はCSS-PベースのDHTMLもサポートしていますから
LAYERタグを使わなくてもDHTMLを使うことが可能です。したがって、
DHTML表記をCSS-Pに統一すればN4とIEを共通に近いコードで互換させることが
可能になります。
例.layerタグで書いた場合
<layer id="a" top="100" left="100">テスト</layer>
例.上記と同じものをCSSで書いた場合
<div id="a" style="position:absolute;top:100px;left:100px">テスト</layer>
* 参考 :
Netscape4.xの独自タグ LAYER についてのリファレンス
ただ、動作が不安定な場合などはLAYERタグで書くと安定する場合があります。
この場合は、たとえば下記のようにLAYERタグを書き出す
ブラウザバージョンをN4のみに限定し、N4以外のブラウザではLAYERタグが書き出されなくすることも可能です。
if(document.layers){ //n4の場合
var lay = "<layer left = '10' "
+ " top = '10' "
+ " width = '100' "
+ " height = '100' "
+ " bgcolor = 'red' "
+ ">"
+ "<p>for4Layer</p>"
+ "</layer>"
} else if(document.all || document.getElementById){
//e4,e5,e6,n6,n7,m1,o6,o7,s1の場合
var lay = "<div style='position : absolute ; "
+ " left : 10px ; "
+ " top : 10px ; "
+ " width : 100px ; "
+ " height : 100px ; "
+ " background-color : red ;'"
+ ">"
+ "<p>for document.all</p>"
+ "</div>"
}
document.write(lay)
3.各ブラウザのオブジェクト構造に注意、ネストの扱いも異なります
N4とIE、そして最近のW3C-DOMに準拠したブラウザはオブジェクトの仕様であるDOM(Document Object Model)が異なっています。
また、ネストされた(入れ子になった)レイヤーの表記方法がN4で大きく違うので注意が必要です。
例.ネストレイヤー"testJr"を作った場合
<style type="text/css">
#test { position:absolute }
#testJr { position:absolute }
</style>
<DIV id="test">
<DIV id="testJr">
text
</div>
</div>
たとえば、上記のようにレイヤー"test"の中にネストした(入れ子になった)レイヤー"testJr"を作るとします。このネストレイヤー"testJr"にアクセスするには
例.N4でのネストレイヤー"testJr"表記方法
1.document.layers.test.document.layers.testJr
2.document.layers['test'].document.layers['testJr']
3.document.layers[index番号].document.layers[index番号]
//もし'test'がそのページの最初のレイヤーならindex番号は0
//'testJr'が'test'の中の最初のレイヤーならindex番号は0
例.IEでのネストレイヤー"testJr"表記方法
1.document.all.testJr.style
2.document.all('testJr').style
3.document.all(index番号).style
//もし'test'がそのページの最初のタグならindex番号は0
例.W3C-DOMサポートブラウザの場合(IE5以降、N6以降、Mozilla1、Opera6、Safari1以降)
1.document.getElementById('testJr').style
2.document.getElementById('test').firstChild.style
//'testJr'が'test'の中の最初のレイヤーの場合 (Operaを除く)
3.document.getElementById('test').childNodes[index番号].style
//'testJr'が'test'の中の最初のレイヤーならindex番号は0 (Operaを除く)
という違いがあります。N4では「'test'の中の'testJr'」というようにネストに沿った書き方をしないとエラ−となるのに対して、
IEやN6,N7,Mozillaなどではではいきなり「'testJr'」へアクセスする形で省略してもかまいません。
4.Win版のIEのみでしか動作しないフィルタートランジッションやバインディング、AxtiveXなどの独自機能には注意する
互換性の高い(多くのOSやブラウザで動作する)ページを作りたいという場合は、各ブラウザごとの独自機能の扱いには注意が必要です。
これらの独自機能はMicrosoft社で主にWin版のIEだけのための技術として開発されたものが多く、その環境下では有用ですが、Win版IE以外の環境も多く混在するインターネット上でのクロスプラットフォームでクロスブラウザなページの実現を目的には普通使われません。
閲覧ブラウザが限定できるイントラネットなどの場合は別ですが、
もし、インターネットなどで広く見てもらうことを目的とするなら、
IE独自のこれらの機能もなるべくcross-browserなスクリプティングによって
記述するように心がけ、どうしても互換できない場合
には他のブラウザに影響しないように注意するのが望ましいかもしれません。