JavaScriptでブラウザ判定する方法を解説!

JavaScriptでChromeやSafari、Internet Explorerなどのブラウザを判別する方法をサンプルコード付きで解説していきます。ユーザーエージェントからブラウザ判別をしましょう。

コンテンツ [表示]

  1. 1JavaScriptでブラウザの判定をしたい
  2. 2JavaScriptでブラウザ判定する方法
  3. 2.1解説
  4. 2.2デバイスの種類の判定

JavaScriptでブラウザの判定をしたい

JavaScriptではnavigator.userAgentでユーザーエージェントを取得することが出来ます。このユーザーエージェントの中にはブラウザを特定することが出来る文字列が含まれています。

例えば

  • Internet Explorer: msie
  • Google Chrome: chrome
  • Firefox: firefox
などです。これらの文字列を使いブラウザ判定する方法を今回解説します。
 

Photo byFree-Photos

JavaScriptでブラウザ判定する方法

それでは早速JavaScriptでブラウザ判定してみましょう。数多くのブラウザがありますが、今回は

  • Internet Explorer
  • Firefox
  • Google Chrome
  • Safari
  • Opera
  • Edge
のブラウザの種類を判定していきます。

上記のサンプルコードのプレビューにはご自身のブラウザの種類が表示されているかと思います。合っていますでしょうか?

次にコードの解説をしていきます。

解説

ブラウザ判定

// ユーザーエージェントを取得し小文字にする
var userAgent = window.navigator.userAgent.toLowerCase();
var browser;

// IE判定
if(userAgent.indexOf('msie') !== -1 || userAgent.indexOf('trident') !== -1) {
  browser = "Internet Explorer";
// Edge判定
} else if(userAgent.indexOf('edge') !== -1) {
  browser = "Edge";
// Chrome判定
} else if(userAgent.indexOf('chrome') !== -1) {
  browser = "Google Chrome";
// Safari判定
} else if(userAgent.indexOf('safari') !== -1) {
  browser = "Safari";
// Firefox判定
} else if(userAgent.indexOf('firefox') !== -1) {
  browser = "Firefox";
// Opera
} else if(userAgent.indexOf('opera') !== -1) {
  browser = "Opera";
} else {
  browser = "判定できませんでした。";
}
document.getElementById("browser").innerHTML = browser;

まず冒頭でお伝えした通りユーザーエージェントはnavigator.userAgentで取得出来ます。それを小文字で変換して、文字列が部分一致しているか調べています。

indexOfは引数の文字列が最初に現れる箇所のインデックスを返します。!== -1の判定はその文字列が含まれている場合を表します。

IEから順番に判定していき、一致するものがあれば変数browserの値を更新します。

最後にid属性がbrowserの要素の内部をbrowserの値で更新してブラウザの種類を表示しています。

デバイスの種類の判定

またアクセスしてきている端末がスマホなのかタブレットなのかPCなのかデバイスの種類の判定もユーザーエージェントから判定可能です。

JavaScriptでデバイスの種類の判定をする方法についてはぜひ下記を参考にしてみて下さい。

あわせて読みたい
JavaScriptでスマホ・タブレットの判定方法を解説!のイメージ
JavaScriptでスマホ・タブレットの判定方法を解説!
JavaScriptでスマホやタブレットを判定する方法をサンプルコード付きで解説します。スマホなのかタブレットなのかPCなのかを判定し処理を振り分けましょう。
GeekHive採用サイト

関連記事