ブラウザ判別とオブジェクト検出

JavaScriptを使ったダイナミックHTMLを実現する場合、現状ではブラウザ毎に別々にコードを記述する必要があります。 そこで多くのサイトではブラウザ判別のコードが書かれています。

function toggleLayer(id){
  if (navigator.appName == "Microsoft Internet Explorer") {
    if (document.all(id).style.visibility == "hidden") {
      document.all(id).style.visibility = "visible";
    } else {
      document.all(id).style.visibility = "hidden";
    }
  } else if (navigator.appName == "Netscape") {
    if (parseInt(navigator.appVersion) < 5) {
      if (document.layers[id].visibility == "hide") {
        document.layers[id].visibility = "show";
      } else {
        document.layers[id].visibility = "hide";
      }
    } else {
      if (document.getElementById(id).style.visibility == "hidden") {
        document.getElementById(id).style.visibility = "visible";
      } else {
        document.getElementById(id).style.visibility = "hidden";
      }
    }
  }

上の例ではnavigatorオブジェクトのappNameというプロパティの値を見てブラウザを判別し、 "Microsoft Internet Explorer"と"Netscape"に対応するコードを実行します。

しかし、Operaのようにnavigator.appNameやnavigator.appVersionの値を簡単に変更できるブラウザもありますし、 個々のブラウザを一つ一つ判別しなければならないので、良い方法とは言えません。

function toggleLayer2(id){
  if (document.getElementById) {
      if (document.getElementById(id).style.visibility == "hidden") {
        document.getElementById(id).style.visibility = "visible";
      } else {
        document.getElementById(id).style.visibility = "hidden";
      }
  } else if (document.all) {
    if (document.all(id).style.visibility == "hidden") {
      document.all(id).style.visibility = "visible";
    } else {
      document.all(id).style.visibility = "hidden";
    }
  } else if (document.layers) {
    if (document.layers[id].visibility == "hide") {
      document.layers[id].visibility = "show";
    } else {
      document.layers[id].visibility = "hide";
    }
  } 
}