【JavaScript】「navigator」オブジェクトで閲覧しているブラウザの名前やバージョンを表示する方法

こんにちは朱夏です。

今回は、JavaScriptを使って、ブラウザの正式名称やバージョンを表示させる方法を紹介したいと思います。

朱夏

フィッシングサイトなんかで自分が使っているブラウザ名やバージョンが表示されたりするけど、あれってどうやってるんだろう？

JavaScriptの「navigator」オブジェクトを使うと、ブラウザ名やブラウザバージョンなどの情報を取得する事が出来ます。

それではいってみましょう。

表示サンプル

初めに実行サンプルを貼っておきます。

See the Pen
JjYOjGL by 朱夏 (@syunatsu1)
on CodePen.

表示サンプルでは、ブラウザの正式名称とバージョン情報を取得してみました。

書き方は次の項で解説したいと思います。

書き方

JavaScriptの書き方は以下の様になります。

/* ブラウザ名称の取得 */
var bname = navigator.appName;
/* ブラウザバージョン情報の取得 */
var bver = navigator.appVersion;

/* ブラウザ名称表示 */
document.getElementById("name").innerHTML = bname;
/* ブラウザバージョン表示 */
document.getElementById("ver").innerHTML = bver;

今回の記述方法では、情報の取得と表示を別々に分けています。

情報取得はそれぞれ以下の様になっています。

変数に上記で取得した情報を格納して、「innerHTML」で書き出しをしています。

こんな感じです。
取得できる情報は他にも使用言語、cookieが有効になっているかなどの情報も取得する事が出来ます。

あとがき

というわけで、JavaScriptを使ってブラウザの名称やバージョンなどを表示する方法を紹介してみました。

今回はそのまま表示するだけでしたが、取得した情報を使って、cookieが無効になっていたら「有効にしてください」と表示を出すなどの使い方も可能です。

今回は以上です。
次回もよろしくお願いします。