Java Script Tips collection - version of JavaScript

ブラウザへの配慮でも述べたことですが、色々なブラウザでそれなりに見えるようにすることは必要ですが、その為にオリジナルからある機能のみを使用するのではあまり面白くありません。

そこで、新しい機能を使用してページを組む場合にはなんらかの対応が必要になります。

具体的には、新しい機能を使用している部分は SCRIPTタグで必要なバージョンを指定し、古いバージョンの為には代替え部品を用意してやることで解決するのが良いと思われます。

<head>
  :
<script language="JavaScript"><!--
// JavaScript1.0 の場合は JavaScript Animation はしない
function setImg(idx,imgname){}
function chImg() { setImg(0,'../images/my.gif'); }
function defImg(){ setImg(0,'../images/my0.gif'); }
// --></script>
<script language="JavaScript1.1"><!--
function setImg(idx,imgname){
  document.images[idx].src=imgname;
}
// --></script>
  :
</head><body>
  :
<img src="my0.gif" alt="はぎさんの">
<a href="CheckVer.htm"
   onMouseOver="chImg()" onMouseOut="defImg()">
変わるわよ</a>
  :
</body>

然し、現実的には JavaScript のバージョンの他にブラウザの種類やプラットフォームの違いにより色々なバグが存在しますから、バグに対する考慮も必要になります。

例えば JavaScript のバージョンに関しては下記のようにします。
( 赤字はMSIEのバグがなければ本来必要ないものです。 )

<head>
  :
<script language="JavaScript"><!--
jsver = 1.0; msie = false;
if (navigator.appName=='Microsoft Internet Explorer'){
  msie = true;
}
// JavaScript1.0 の場合は JavaScript Animation はしない
function setImg(idx,imgname){}
function chImg() { setImg(0,'../images/my.gif');  }
function defImg(){ setImg(0,'../images/my0.gif'); }
// --></script>
<script language="JavaScript1.1"><!--
jsver=1.1;
if(msie){
  var nv = navigator.appVersion.substring(0,3);
    // MSIE3.0(Mozilla/2.0) では JavaScript1.1は無効
  if(nv<4.0) jsver=1.0;
}
function setImg(idx,imgname){
  if(jsver>=1.1){
    document.images[idx].src=imgname;
  }
}
// --></script>
  :
</head><body>
  :

<img src="my0.gif" alt="はぎさんの">
<a href="CheckVer.htm"
   onMouseOver="chImg()" onMouseOut="defImg()">
変わるわよ
</a>
  :
</body>

もし、JavaScript1.1 までの機能を使用して JavaScript1.0 のブラウザにも対応することが目的なら、もっと簡単な方法があります。

<head>
  :
<script language="JavaScript"><!--
// JavaScript1.0 の場合は JavaScript Animation はしない
function setImg(idx,name){}
function chImg() { setImg(0,'../images/my.gif');  }
function defImg(){ setImg(0,'../images/my0.gif'); }
// --></script>
<script language="JavaScript1.1" src="JsAnim.js"></script>
  :
</head><body>
  :

<img src="my0.gif" alt="はぎさんの">
<a href="CheckVer.htm"
   onMouseOver="chImg()" onMouseOut="defImg()">
変わるわよ
</a>
  :
</body>

function setImg(idx,imgname){
  document.images[idx].src=imgname;
}

このようにすれば、ブラウザが JavaScript のバージョンに関してどのような値を返しても実際に JavaScript ファイルをサポートしていなければ JavaScript1.1 の関数で上書きされることはありません。
但し、この方法は script タグの src プロパティを利用しているので JavaScript1.2 に対しては利用できませんし、参照するファイルが１つ増えますので表示に要する時間が多少かかるようになります。

また、最近流行の DHTML を利用して JavaScript1.2 以上を前提とする場合には、以下のようにすると簡単に判定できます。

  :
<script language="JavaScript"><!--
if(document.all){
  // IE 4/5 用のコード
  if(document.getElementById){
    // IE 5 用のコード
  } else {
    // IE 4 用のコード
  }
} else if(document.getElementById){
  // Mozilla 5( NN6 )用のコード
} else if(document.layers){
  // Netscape Navigator 4用のコード
} else {
  // その他の場合のコード
}
// --></script>
  :

上の方法は JavaScript1.2以上で追加されたオブジェクトや機能を使用して判定する方法です。

因みに getElementById は W3C の DOM( Document Object Model )で規定されている、 NN6( Mozilla )で追加されたメソッドですが IE5 でも不完全な形で追加されているため、判定の順番は上記の通りでなければなりません。

当然、この方法は他のバージョンでも対象を変えれば応用できます。
目的に応じて色々とチェックする対象を変えてみて下さい。

JavaScript のバージョン以外にも各ブラウザのバージョンやプラットフォームにより、正常に動作する機能としない機能があります。

ここではその全てを挙げて、対応策を紹介できないので、そのようなケースにぶつかった場合の対処方法として使用できるものを以下に示します。

brwsMajor = parseInt(navigator.appVersion);

brwsMinor = parseFloat(navigator.appVersion);

agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('プラットフォーム識別')!=-1){
}

スクリプトの記述

色々なバージョンで見られるようにするには