ブラウザのバージョンを調べる１

HOME
JavaScript入門
ブラウザのバージョンを調べる１

このページでは、navigatorを使ってブラウザのバージョンを調べる方法について考えます。前のページではappNameやappVersionも組み合わせてブラウザを判別しましたが、今回は煩雑になるのでuserAgentのみを使ってバージョンを取得したいと思います。

ブラウザのバージョンによってJavaScriptの解釈が違ったり、レイアウトが崩れたりすることがあります（特にInternet Explorer）。それを避けるためにバージョン別にページを用意したりすることがあります。勿論そんな面倒なことを必ずしなくてはいけないという訳ではありませんが、知識として知っておくと役に立つこともあるでしょう。

このページではInternet ExplorerとFireFoxのバージョンを取得する方法について考えます。

ブラウザバージョンを取得する

バージョンを調べるには、まずどのブラウザが判別しなければなりません。 userAgentを見ると、Internet Explorerには「MSIE」という文字列が、 FireFoxには「Firefox」という文字列が含まれます。それをindexOf()で検索して、その後に続くバージョンを切り取ればOKです。

なお、各ブラウザにおけるuserAgentの値は、古籏氏のuserAgent一覧が非常に参考になります。

ではHTMLのbody内に、以下のスクリプトを記入してみてください。

<script>

var nvUA =navigator.userAgent;  //userAgentを取得して格納
var cutSt,cutEd;  //切り取り開始点と終了点
var bwVer;    //ブラウザバージョンを格納する変数

//最初にInternet Explorerか調べます
cutSt = nvUA.indexOf("MSIE");

//「MSIE」の文字列があれば、バージョンを取得する
if ( cutSt != -1 )
{
  //バージョン番号の後に「;」があるのでそれを検索
  cutEd = nvUA.indexOf(";",cutSt);
  
  //「MSIE」＋半角スペースの5文字を加えた位置から切り取る
  bwVer = nvUA.substring(cutSt+5,cutEd);
  
  //頭に「Internet Explorer」を付けてバージョンを書き出す
  document.write("Internet Explorer "+bwVer);
}


//今度はFireFoxか調べます
cutSt = nvUA.indexOf("Firefox");

//「Firefox」の文字列があれば、バージョンを取得する
if (cutSt != -1)
{
  //FireFoxの場合、バージョンは最後。つまり終了点は文字列全体の長さ。
  cutEd = nvUA.length;
  //「Firefox」＋「/」の8文字を加えた位置から切り取ります
  bwVer = nvUA.substring(cutSt+8,cutEd);
  
  //頭に「FireFox」を付けてバージョンを書き出す
  document.write("FireFox " + bwVer);
}

</script>

＜上記スクリプトの結果＞

スクリプトの解説

では上記スクリプトの解説をしていきましょう。

変数の宣言

最初に変数をまとめて宣言しておきました。変数nvUAにはnavigator.userAgentの値を格納しておきます。その中から必要部分を切り取るための開始位置と終了位置を格納するために変数cutSt，変数cutEdを宣言し、取得したバージョンを格納する変数bwVerも宣言しておきました。

Internet Explorerか調べる

ついで、IEかどうか調べます。IEなら「MSIE」という固有の文字列が存在します。これをindexOf()で検索し、文字位置を変数cutStに代入します。

変数cutStの値が-1では無い時（つまり「MSIE」が存在する時）、if文の中の処理を行います。 if文の中でIEのバージョンを取得していきます。

userAgentの値を見ると「　…MSIE 9.0; …」といった感じでバージョンが記入されています。ですからバージョンの直ぐ後にある「;」の位置を検索することで、バージョン部分を切り取ることができます。

indexOf()で検索文字を「;」とし、検索開始位置を変数cutStに指定します。こうすることで「MSIE」という文字列が出てくる位置から見て最初の「;」の位置を取得できます。取得した位置情報を、変数cutEdに代入します。

続いてsubstring()で文字の切り取りを行います。切り取り開始位置ですが、そのまま変数cutStを指定すると「MSIE」の文字列の頭から切り取ります。今回はバージョンの数字部分だけ取得したいので、「MSIE」の4文字と、バージョンの間にある「半角スペース」の1文字を足した合計5文字を加えた位置から切り取ります。終了位置は変数cutEdになります。

最後にdocument.write()でブラウザとバージョンを書き出します。

FireFoxか調べる

続いてFireFoxか調べています。FireFoxなら「Firefox」という文字列が存在します。これをindexOf()を使って検索し、文字列が存在するか調べてif文で処理を分岐します。

FireFoxの場合、バージョン情報はuserAgentの一番最後にあります。ですから切り取り終了点は文字列全体の長さで代用できます。文字列長を得るのはlengthでした。それを変数cutEdに代入します。

userAgentの値を見ると「 …Firefox/6.0.2」といった感じでバージョンが記載されています。ですからバージョンの数字部分だけ切り取るには、開始点を変数cutStから「Firefox/」の8文字を加えた部分にします。終了点は変数cutEdです。

最後に、ブラウザとバージョンをdocument.write()で書き出しています。

前へ次へ